先做数据源store.js文件
// 状态 store 统一数据源 import React, { createContext } from 'react' // Provider 发布消息 // Consumer 对于发布的消息进行消费(接受) let { Provider, Consumer } = createContext() export { Provider, Consumer }
App文件
import React, { Component } from 'react' import Cmp1 from './components/Cmp1' import Cmp2 from './components/Cmp2' // 统一的数据源 import { Provider } from './context/store' // 只有在类组件中才有生命周期 export default class App extends Component { constructor(props) { super(props); this.state = { title: '你好世界' } } render() { return ( <div> {/* 多层组件之间的通信 发布一下,子孙们,祖先有数据给你们 */} <Provider value={this.state.title}> <Cmp1 /> <Cmp2 /> </Provider> </div > ) } }
Cmp1文件
import React, { Component } from 'react'; import Cmp2 from './Cmp2'; // 统一数据源 import { Consumer } from '../context/store' class Cmp1 extends Component { render() { return ( <div> <Cmp2 />
{/* <Consumer> 父级不想消费
{value => <h3>{value}</h3>}
</Consumer> */}
</div> ); } } export default Cmp1;
Cmp2文件
import React, { Component } from 'react' // 统一的数据源 import { Consumer } from '../context/store' class Cmp2 extends Component { render() { return ( <div> cmp2---得到数据 <hr/> {/* 消费一下 */} <Consumer> { value=><h1>{value}</h1> } </Consumer> </div> ); } } export default Cmp2;