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 (
       

           DemoA
          顶层传递来的数据:{count}
           
       
   );
}

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

function ConText() {
   const [count,setCount] = useState(0);
   return (
   	// 使用 Provier 包裹最外层组件,利用 value 属性向n个子组件传递数据
       
           

               
context
               setCount(count+1)}>{count}
               

               
           
       
   );
}

效果展示

二.类组件跨组件通信

实现步骤

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

代码实现

import React, { createContext } from "react";

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

function DemoA() {
    return (
        
this is DemoA
            
        
    )
}

function DemoC() {
    return (
        

            this is DemoC 

            {/* 3.通过 Consumer 使用数据 */}
            
                {value => {value}}
            
        
    )
}

class App extends React.Component {
    state = {
        message: "this is message"
    }
    render() {
        return (
            // 2.使用 Proveider 包裹根组件
            
                

                    
                
            
        )
    }
}
export default App

效果展示