React中如何从其他组件为useState钩子传递值？

核心实现思路 #

Parent和Child为同级兄弟组件，不存在嵌套关系，无法直接通过父子props传递调用方法，因此需要将共享的显隐状态提升到二者共同的父组件App.js中管理，再通过props分别将显隐状态传递给Parent组件、将状态切换方法传递给Child组件即可实现需求。

分步实现代码 #

1. 修改App.js

将原本定义在Parent中的状态移到App中，定义切换逻辑后透传对应参数给两个子组件：

import { useState } from "react";
import Parent from "./Parent";
import Child from "./Child";
// 其他组件导入如Menu、Footer等保持不变

function App() {
  // 将显隐状态定义在共同父组件App中
  const [showHideContent, setShowHideContent] = useState("none");
  // 定义切换显隐的方法
  const toggleShowContent = () => {
    setShowHideContent(prevState => prevState === "none" ? "block" : "none");
  };

  return (
    {/* 其他App组件代码保持不变 */}
    <Route path="/content">
      <Menu /> {/* 左侧渲染 */}
      <div className="content-flexbox">
        {/* 把显隐状态传给Parent组件 */}
        <Parent showContent={showHideContent} /> {/* 中间渲染 */}
        {/* 把切换方法传给Child组件 */}
        <Child toggleContent={toggleShowContent} /> {/* 右侧渲染 */}
      </div>
      <Footer /> {/* 底部渲染 */}
    </Route>
  )
}

2. 修改Parent.js

移除内部定义的state，接收App传递的showContent参数控制显隐：

function Parent({ showContent }) {
    return (
        <div style={{ display: showContent }}>
            此处为待显隐的内容...
        </div>
    );
}

export default Parent;

3. 修改Child.js

接收App传递的toggleContent方法，绑定到按钮的点击事件上：

function Child({ toggleContent }) {
    return (
        <button onClick={toggleContent}>
            显示/隐藏内容
        </button>
    );
}

export default Child;

内容的提问来源于stack exchange，提问作者Deepanshu Yadav