React16.x之后使用新的context
解决 多层数据传递时,一层层props传递的麻烦
常用api
React.createContext()、Provider、Consumer
Provider+Consumer例子
App.jsx
import React from 'react';
import Son from './son';
export const {Provider,Consumer} = React.createContext("默认值");
export default class App extends React.Component {
render() {
let name ="张三"
return (
<Provider value={name}>
<div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
<p>父组件</p>
<Son/>
</div>
</Provider>
);
}
}
Son.jsx
import React from 'react';
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
return (
<div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
哈哈哈哈
<Grandson />
</div>
);
}
export default Son;
grandson.jsx
import React from 'react';
import { Consumer } from "./App.js";
function Grandson() {
return (
<Consumer>
{(name ) =>
<div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
<p>孙组件。获取祖父传递下来的值:{name}</p>
</div>
}
</Consumer>
);
}
export default Grandson;
思想:
React.createContext会生成对应的Provider,Consumer组件,
传递数据的是Provider,Provider通过value属性进行传递数据
接收数据的是Consumer,Consumer是一个函数,通过参数,得到传递的数据
如果子组件找不到父辈组件被Provider 包裹,createContext("默认值")生效
Provider可以多层嵌套,子组件取值从最近的开始
一个Provider 可以对应多个Consumer
Provider+contextType+this.context
App.js
import React, { Component } from 'react';
import Son from './son'
import {commonContext} from './context.js'
class App extends Component {
render() {
return (
<commonContext.Provider value="我是共有的">
<Son />
</commonContext.Provider>
);
}
}
export default App;
context.js
import { createContext } from 'react';
export const commonContext = createContext();
son.js
import React, { Component } from 'react';
import GrandSon from "./grandson.js";
class Son extends Component {
render() {
return <GrandSon />
}
}
export default Son;
grandson.js
import React, { Component } from 'react';
import { commonContext } from './context.js'
//声明一个孙组件
class Son extends Component {
static contextType = commonContext;
render() {
return<h1>{this.context}</h1>
}
}
export default Son;
曾经的循环引用错误
Cannot access 'AppContext' before initialization
没定义context.js,造成了App.js中间接引用了孙子,孙子中引用了App.js中的export const commonContext = createContext();
思想:
跟组件通过Provider 的value 传递数值,消费的类组件,用static contextType = commonContext; 接受后,就可以使用this.context 获取Provider 的value值
contextType 只能在类组件中使用
一个组件如果有多个 consumer , contextType 只对其中一个有效,所以说,contextType 只能有一个
网友评论