父亲
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;
子组建
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;
