react hook 父子组件传值示例

我司现在技术栈是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;