我司现在技术栈是react,用的是开箱即用的pro,我个人习惯用函数式组件,所以用hook比较多。现在写个父子组件传值的示例,希望能帮助到你。
父组件:
import React, { useState,createContext} from "react";
import Counter from './index1'
const myContext = 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={myContext} />
</myContext.Provider>
</div>
);
}
export default App;
子组件使用useContext ,来获取父级组件传递过来的context值。
子组件:
import React, { useContext} from 'react';
// 关键代码
function Counter({myContext}) {
const count = useContext(myContext); // 得到父组件传的值
return (
<div>
<h4>我是子组件</h4>
<p>这是父组件传过来的值:{count}</p>
</div>
)
}
export default Counter;