React Hooks中使用useContext 进行父组件向子组件传值

废话不多说，直接上代码。

代码如下：

1、封装一个公共文件createContext.js

在src/utils文件夹下新建一个createContext.js文件，代码如下：

// createContext.js文件

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

2、在父组件中使用

import React, { useState} from "react";
import Count from './count'
import myContext from '@/utils/createContext'

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>Father</h3>
      <p>You clicked {count} times</p>
      <button onClick={() => { setCount(count + 1) }}>
        click me
      </button>
      <myContext.Provider value={count}>
        <Count />
      </myContext.Provider>
    </div>
  );
}
export default App;

           

3、创建子组件count.tsx：

import React, { useContext} from 'react';
import myContext from '@/utils/createContext'

function Count() {
    const count = useContext(myContext);  // 得到父组件传的值
    return (
        <div>
            <h3>我是子组件</h3>
            <p>这是父组件传过来的值：{count}</p>
        </div>
    )
}

export default Count;
           

效果如下图：