ReactHooks中使⽤useContext进⾏⽗组件向⼦组件传值
关于React Hooks中使⽤useContext 进⾏⽗⼦组件传值（⽗⼦组件不在同⼀个⽂件中）
1、封装的公共⽂件react组件之间通信
// 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;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。