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

1、封装的公共文件

在组件外部建立一个Context

// createContext.js文件

import { createContext } from "react";

const myContext = createContext(null);

export default myContext;

 

2、父组件

myContext.Provider提供了一个Context对象，这个对象是可以被子组件共享的。

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、子组件

useContext()钩子函数用来引入Context对象，从中获取count 属性

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;

 

有人可能觉得用useState可以实现啊，为啥要用这个，这个的话其实是你的子组件写到别的文件里也还是可以公用这个状态的，也就是这个状态对子组件的子组件的子组件也可以公用。