1.Context
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。即发布订阅模式Context – React。
2.React.createContext
React.createContext:创建一个上下文的容器(组件), defaultValue为共享的默认数据。
const {Provider, Consumer} = React.createContext(defaultValue);
Provider(生产者): 用于发布共享数据,value为需要共享的数据。
<Provider value={/*共享的数据*/}>
/*里面可以渲染对应的内容*/
</Provider>
Consumer(消费者): 获取供应商发布的数据,Consumer需要嵌套在生产者下面,才能通过回调的方式拿到共享的数据源。当然也可以单独使用,那就只能消费到上文提到的defaultValue
<Consumer>
{value => /*根据上下文 进行渲染相应内容*/}
</Consumer>
代码效果图:
demo效果图.png
- App.js 父组件
//App.js
import React from 'react';
import Son from './son';//引入子组件
// 创建一个 theme Context,
export const {Provider,Consumer} = React.createContext("默认名称");
export default class App extends React.Component {
render() {
let name ="小人头"
return (
//Provider共享容器 接收一个name属性
<Provider value={name}>
<div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
<p>父组件定义的值:{name}</p>
<Son />
</div>
</Provider>
);
}
}
son.js 子组件
//son.js 子类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
return (
//Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
<Consumer>
{( name ) =>
<div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
<p>子组件。获取父组件的值:{name}</p>
{/* 孙组件内容 */}
<Grandson />
</div>
}
</Consumer>
);
}
export default Son;
grandson.js 孙组件
//grandson.js 孙类
import React from 'react';
import { Consumer } from "./App.js";//引入父组件的Consumer容器
function Grandson(props) {
return (
//Consumer容器,可以拿到上文传递下来的name属性,并可以展示对应的值
<Consumer>
{(name ) =>
<div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
<p>孙组件。获取传递下来的值:{name}</p>
</div>
}
</Consumer>
);
}
export default Grandson;
同样的,如果需要在消费者状态下更改发布者的内容,可以在发布者中放置更改的方法,然后在消费者中使用。