初学react - React Hooks中使用useContext 进行父组件向子组件传值

Myth丶恋晨 2021-08-26 13:10 450阅读 0赞

今天来说说关于React Hooks中使用useContext 进行父子组件传值（父子组件不同在一个文件中），在百度上搜索出来的文章大多都是将父组件和子组件都写在同一个文件中，但是我们做的项目大多都是父子组件分别在一个文件中，现在我给大家分享一下关于父子组件不同在一个文件的时候是如何传值的，举个简单的例子：

### 效果图： ###

![在这里插入图片描述][20200311121718162.gif]

### 案例代码如下： ###

##### 1、封装的公共文件 #####

// createContext.js文件
    
    import { createContext } from "react";
    const myContext = createContext(null);
    export default myContext;

##### 2、父组件 #####

import React, { useState} from "react";
    import Counter from './Counter'
    import myContext from './createContext'
    
    function App() {
      const [count, setCount] = useState(0);
    
      return (
        <div>
          <h4>我是父组件</h4>
          <p>点击了 {count} 次!</p>
          <button
            onClick={() => {
              setCount(count + 1);
            }}
          >
            点我
          </button>
    
          {/* 关键代码 */}
          {/* 提供器 */}
          <myContext.Provider value={count}>
            <Counter />
          </myContext.Provider>
        </div>
      );
    }
    export default App;

##### 3、子组件 #####

import React, { useContext} from 'react';
    import myContext from './createContext'
    
    // 关键代码
    function Counter() {
        const count = useContext(myContext);  // 得到父组件传的值
        return (
            <div>
                <h4>我是子组件</h4>
                <p>这是父组件传过来的值：{count}</p>
            </div>
        )
    }
    
    export default Counter;

[20200311121718162.gif]: /images/20210813/0b9ffade8bda4598aea4a71a04502d98.png