React跨组件传值

---

前言

应用场景

上图是一个react形成的嵌套组件树,如果需要跨组件传值,该怎么办呢?如果使用 props 一层一层的往下面传,就很麻烦.
可以通过Context,就可以在组件树之间进行数据传递

一.hook跨组件传值

实现步骤

1. 使用 createContext创建Context对象
2. 在顶层组件通过Provider提供数据
3. 在底层组件通过useContext函数获取数据

代码实现

import React, { createContext,useState,useContext } from "react";
// 通过 react 的 createContext 实现跨组件传值
const Context = createContext();

function DemoA() {
   // 通过 useContext 获取顶层的数据
   const count = useContext(Context);
   return (
       <div>
           DemoA
          顶层传递来的数据:{count}
           <DemoC />
       </div>
   );
}

function DemoC() {
   const count = useContext(Context);
   return <div>DemoC 
       顶层传递的数据:{count}
          </div>;
}

function ConText() {
   const [count,setCount] = useState(0);
   return (
   	// 使用 Provier 包裹最外层组件,利用 value 属性向n个子组件传递数据
       <Context.Provider value={count}>
           <div>
               <h1>context</h1>
               <button onClick={()=>setCount(count+1)}>{count}</button>
               <hr />
               <DemoA />
           </div>
       </Context.Provider>
   );
}

效果展示

二.类组件跨组件通信

实现步骤

1. 导入 createContext 方法并执行
2. 使用 Proveider 包裹根组件
3. 通过 Consumer 使用数据

代码实现

import React, { createContext } from "react";

// 1.导入 createContext 方法并执行
const { Provider, Consumer } = createContext()

function DemoA() {
    return (
        <div>this is DemoA
            <DemoC />
        </div>
    )
}

function DemoC() {
    return (
        <div>
            this is DemoC <br />
            {/* 3.通过 Consumer 使用数据 */}
            <Consumer>
                {value => <span>{value}</span>}
            </Consumer>
        </div>
    )
}

class App extends React.Component {
    state = {
        message: "this is message"
    }
    render() {
        return (
            // 2.使用 Proveider 包裹根组件
            <Provider value={this.state.message}>
                <div>
                    <DemoA />
                </div>
            </Provider>
        )
    }
}
export default App

效果展示