[JavaScript知识库] react使用createcontext实现组件通信

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react使用createcontext实现组件通信 -> 正文阅读

[JavaScript知识库]react使用createcontext实现组件通信

类式组件

父组件
在这里插入图片描述
这样a的子组件就都能接收value

孙组件
在这里插入图片描述
这样value就保存再了context中

函数式组件

标准

import React  from 'react';
import './App.css';
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider ， Consumer}
function App(){
  //使用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={12}>
        <div>
        <ShowAn />
        </div>
    </numberContext.Provider>
  )
}

function ShowAn(){
  //使用Consumer从上下文获取value
  return(
    <numberContext.Consumer>
      {value=><div>the answer is {value}</div>}
    </numberContext.Consumer>
  )
}
export default App;

使用usecontext

import React,{useContext}  from 'react';
import './App.css';
//创建context
const numberContext = React.createContext();
//它返回一个具有两个值的对象
//{Provider ， Consumer}
function App(){
  //使用Provider为所有子孙提供value值
  return (
    <numberContext.Provider value={520}>
        <div>
        <ShowAn />
        </div>
    </numberContext.Provider>
  )
}

function ShowAn(){
  //使用Consumer从上下文获取value
//调用useContext，传入从React.createContext获取的上下文对象。
  const value = useContext(numberContext);
  return(
    // <numberContext.Consumer>
      // {value=><div>the answer is {value}</div>}
    // </numberContext.Consumer>
    <div>
      the answer is {value}
    </div>

  )
}
export default App;