这是我参与8月更文挑战的第七天,活动详情查看:8月更文挑战
\
2. Context使用步骤:
const {Provider,Consumer} = React.createContext()
<Provider>
<div className="App">
<Child1/>
</div>
</Provider>
<Provider value="pink">
<Consumer>
{/* 回调 */}
{
data => <span>{data}</span>
}
</Consumer>
// ES6 中模块化语法
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 创建context得到两个组件
const { Provider, Consumer } = React.createContext()
class App extends React.Component {
render() {
return (
<Provider value="pink">
<div className="app">
<Node />
</div>
</Provider>
)
}
}
const Node = props => {
return (
<div className="node">
<SubNode />
</div>
)
}
const SubNode = props => {
return (
<div className="subnode">
<Child />
</div>
)
}
const Child = props => {
return (
<div className="child">
<Consumer>
{/* 回调 */}
{
data => <span>{data}</span>
}
</Consumer>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))