当最外层父组件需要给最底层子组件传递数据时,按照react中组件通信方式,需要使用props一层层组件向下传递,当组件层次较多时,会比较繁琐;
这时我们可以使用Context,Context作用就是跨组件传递数据;
使用步骤:
1. 调用React.createContext() 创建Provider(用来提供数据) 和 Consumer(用来消费数据) 两个组件;
const {Provider,Consumer} = React.createContext();
2. 使用Provider组件作为父节点包裹我们的应用(根组件);
3. 设置value属性,表示要传递的数据;
<Provider value='name'>
<div>
<Child></Child>
</div>
</Provider>
4. 调用 Consumer组件接收数据;
<Consumer>
{(data)=>{return <span>data参数表示接收到的数据---{data}}</span>}
</Consumer>
小案例如下:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// 创建Context
const {Provider,Consumer} = React.createContext();
class App extends React.Component{
state={
name:'张三'
}
render(){
return(
<Provider value={this.state.name}>
<div className='app'>
App
<Node />
</div>
</Provider>
)
}
}
class Node extends React.Component{
render(){
return (
<div className='node'>
Node
<SubNode />
</div>
)
}
}
class SubNode extends React.Component{
render(){
return (
<div className='subNode'>
SubNode
<Child />
</div>
)
}
}
class Child extends React.Component{
render(){
return (
<div className='child'>
我是最底层子组件 Child
<Consumer>
{(data)=>{return <span> Context传递过来的数据为: {data}</span>}}
</Consumer>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
index.css:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.app{
background-color: rgb(240, 26, 61);
padding: 10px;
}
.node{
background-color: rgb(247, 69, 99);
padding: 10px;
}
.subNode{
padding: 10px;
background-color: rgb(252, 160, 175);
}
.child{
padding: 10px;
background-color: rgb(247, 204, 209);
}