一般我们会使用useContext和createContext来进行父子组件的传值 官网

父组件

我们使用计数器作为父组件

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>次数:{count}</div>
      <button onClick={() => {setCount(count + 1);}}>增加次数</button>
    </>
  );
}

子组件

我们写一个子组件，用于展示count

function ShowCount(){
  return <div>{count}</div>
}

传值

创建上下文对象

我们需要在全局创建上下文对象

const CountContext = createContext(0)

父组件传值

<>
  <div>次数:{count}</div>
  <button onClick={() => {setCount(count + 1);}}>增加次数</button>
  <CountContext.Provider value={count}>
    <ShowCount/>
  </CountContext.Provider>
</>

子组件接收值

  const count = useContext(CountContext)
  return <div>{count}</div>

当我们点击按钮的时候就会发现数据传过去了

最后

以上就是紧张羊为你收集整理的ReachHooks之父子组件传值父组件子组件传值的全部内容，希望文章能够帮你解决ReachHooks之父子组件传值父组件子组件传值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。