React组件通信的实现示例

 import React from 'react'
 ​
 // 函数式子组件
 function FSon(props) {
   console.log(props)
   return (
     <div>
       子组件1
       {props.msg}
     </div>
   )
 }
 ​
 // 类子组件
 class CSon extends React.Component {
   render() {
     return (
       <div>
         子组件2
         {this.props.msg}
       </div>
     )
   }
 }
 // 父组件
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <FSon msg={this.state.message} />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }
 ​
 export default App

class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <FSon 
           msg={this.state.message} 
           age={20} 
           isMan={true} 
           cb={() => { console.log(1) }} 
           child={<span>this is child</span>}
         />
         <CSon msg={this.state.message} />
       </div>
     )
   }
 }

import React from 'react'
 ​
 // 子组件
 function Son(props) {
   function handleClick() {
     // 调用父组件传递过来的回调函数 并注入参数
     props.changeMsg('this is newMessage')
   }
   return (
     <div>
       {props.msg}
       <button onClick={handleClick}>change</button>
     </div>
   )
 }
 ​
 ​
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   // 提供回调函数
   changeMessage = (newMsg) => {
     console.log('子组件传过来的数据:',newMsg)
     this.setState({
       message: newMsg
     })
   }
   render() {
     return (
       <div>
         <div>父组件</div>
         <Son
           msg={this.state.message}
           // 传递给子组件
           changeMsg={this.changeMessage}
         />
       </div>
     )
   }
 }
 ​
 export default App

 import React from 'react'
 ​
 // 子组件A
 function SonA(props) {
   return (
     <div>
       SonA
       {props.msg}
     </div>
   )
 }
 // 子组件B
 function SonB(props) {
   return (
     <div>
       SonB
       <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
     </div>
   )
 }
 ​
 // 父组件
 class App extends React.Component {
   // 父组件提供状态数据
   state = {
     message: 'this is message'
   }
   // 父组件提供修改数据的方法
   changeMsg = (newMsg) => {
     this.setState({
       message: newMsg
     })
   }
 ​
   render() {
     return (
       <>
         {/* 接收数据的组件 */}
         <SonA msg={this.state.message} />
         {/* 修改数据的组件 */}
         <SonB changeMsg={this.changeMsg} />
       </>
     )
   }
 }
 ​
 export default App

 const { Provider, Consumer } = createContext()

<Provider value={this.state.message}>
     {/* 根组件 */}
 </Provider>

 <Consumer >
     {value => /* 基于 context 值进行渲染 */}
 </Consumer>

import React, { createContext }  from 'react'
 ​
 // 1. 创建Context对象 
 const { Provider, Consumer } = createContext()
 ​
 ​
 // 3. 消费数据
 function ComC() {
   return (
     <Consumer >
       {value => <div>{value}</div>}
     </Consumer>
   )
 }
 ​
 function ComA() {
   return (
     <ComC/>
   )
 }
 ​
 // 2. 提供数据
 class App extends React.Component {
   state = {
     message: 'this is message'
   }
   render() {
     return (
       <Provider value={this.state.message}>
         <div className="app">
           <ComA />
         </div>
       </Provider>
     )
   }
 }
 ​
 export default App