react Context
React Context
2023-09-14 08:58:44 时间
import React, { useState, useEffect, useContext } from "react";
import axios from "axios";
const l = console.log;
const BodyContext = React.createContext("body");
function Test(props) {
// return <Hello body={`hello world`} />;
return (
<BodyContext.Provider value="hello ajanuw">
<Hello />
</BodyContext.Provider>
);
}
function Hello({ body }) {
return <World />;
}
function World(props) {
// return <div>{props.body}</div>;
// return (
// <BodyContext.Consumer>
// {body => <div>{body}</div>}
// </BodyContext.Consumer>
// );
const body = useContext(BodyContext);
return <div>{body}</div>;
}
export default Test;
相关文章
- react源码解析6.legacy模式和concurrent模式
- react路由权限设置
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React教程(详细版)
- React&CSS3: 写一个 spinner 圆形加载动画
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- React高级特性之Context
- 关于react-dnd,看这一篇就够了
- React魔法堂:echarts-for-react源码略读
- 尝试 React 17 RC / Demo of Gradual React Upgrades
- 一天梳理完react面试高频知识点
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react源码解析1.开篇介绍和面试题_2023-02-27
- react源码分析:深度理解React.Context_2023-02-28
- 你必须知道的react redux 陷阱
- react源码分析context
- React源码--React Fiber
- React的Context源码是怎么实现的
- react hook开发遇到的一些问题
- react hook 完全解读
- react源码分析:深度理解React.Context
- react源码分析:深度理解React.Context_2023-02-07
- 前端二面高频react面试题集锦_2023-02-23
- React 许可证虽严苛,但不必过度 react