React Hooks中useContext 分开的父子组件进行传值

React Hooks中useContext 分开的父子组件进行传值

初次学习react-hooks的useContext，网上很多都是把父子组件写到一个文件的例子；今天分享一个把父子组件分开文件写的例子；

1. 封装的一个公共组件，用于父子组件分别调用：

import { createContext } from "react";
const CommonContext = createContext(null);
export default CommonContext;

2. 父组件 引入CommonContext公共组件，CommonContext.Provider内包括子组件Child

import React, { useState } from "react";
import CommonContext from "./components/commonContext"  // 关键代码
import Child from "./components/child";
import { Button } from "antd";

const UseContextPage = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>点击次数：{count}</p>
      <Button type="primary" onClick={() => {setCount(count+1)}} >Dashed Button</Button>
      <CommonContext.Provider name={count}>  // 关键代码
        <Child />
      </CommonContext.Provider>  // 关键代码
    </div>
  );
};

export default UseContextPage;

3. 子组件 引入CommonContext公共组件

import React, { useContext } from "react";
import CommonContext from "../commonContext/CommonContext"  // 关键代码

const Child0 = () => {
  const count = useContext(CommonContext)  // 关键代码
  return (
    <div>
      子组件计数：{count}
    </div>
  );
};

export default Child;