如何在不同的反应组件中使用钩子？

Question

我创建了一个钩子来切换我网页中导航栏的可见性（这是在 NavBar.jsx 中完成的），我需要在我的代码中的其他地方切换导航栏，即在 Journey.jsx 下，我可以将这些作为参数传递吗？我该如何处理？

这里是我的代码的 essential/boiled-down 摘录，如果它们可以帮助的话....

App.jsx:

function App () {
    return (
        <Router hashType="hashbang">
                <div className="App">
                        <NavBar />
                <Switch>
                                <Route exact path="/l" component={() => <Lorem/>} />
                                <Route exact path="/j" component={() => <Journey/>} />
                                <Route exact path="/i" component={() => <Ipsum/>} />
                        </Switch>
                </div>
        </Router>
    );
}

NavBar.jsx:

function NavBar () {
    //I need access to these in Journey.jsx
    const [sidebar, setSidebar] = useState(false);
    const showSidebar = () => setSidebar(!sidebar);

    return(
        //elaborations about the menu where I use these functions/varariables
    );
}

Journey.jsx:

function Journey () {
    return (
        //some unimportant divs
        <button onClick={****I need access to showSidebar here****} ></button>
    );
}

我的 NavBar 的配置方式是切换它的汉堡包图标在任何地方（包括旅程页面）都是可见和可用的，但我只希望这个特定按钮出现在旅程页面上，而不是其他任何地方，因为，根据网站的主题（由我的设计师团队设计）它应该是一种美学功能

我该怎么做才能做到这一点？因为我已经尝试重新创建 App.jsx 的钩子并尝试将每个 func/var 作为 props 传递，然后在 Journey 中将其引用为 props.sidebar 等，但这也不起作用....

如果解决方案只是作为参数传递，我究竟该怎么做，因为我试过了，但它说的是类似未声明的内容。

还有其他选择吗？

谢谢，

Answer 1

要么将状态提升到它们最近的共同祖先 (app.js)，然后在 App.js 中创建一个 handleClick 方法（在 App.js 中进行状态更改）并将具有 navBar 当前状态的方法作为 porps 传递给 Journey 和 NavBar。
或者您使用上下文检查：https://reactjs.org/docs/context.html and https://reactjs.org/docs/hooks-reference.html#usecontext 了解更多信息。

Answer 2

共享状态最简单的方法是将状态提升到它们共同的父组件，然后通过props传递状态和一些改变状态的方法，像这样：

function App() {
  // lift state up
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  return (
    <Router hashType="hashbang">
      <div className="App">
        {/* pass state by props */}
        <NavBar sidebar={sidebar} showSidebar={showSidebar} />
        <Switch>
          <Route exact path="/l" component={() => <Lorem />} />
          {/* pass state by props */}
          <Route exact path="/j" component={() => <Journey sidebar={sidebar} showSidebar={showSidebar} />} />
          <Route exact path="/i" component={() => <Ipsum />} />
        </Switch>
      </div>
    </Router>
  );
}

function NavBar ({sidebar,showSidebar}) {

  return(
      //elaborations about the menu where I use these functions/varariables
  );
}

function Journey ({sidebar,showSidebar}) {
  return (
      // use state from props
      <button onClick={showSidebar} ></button>
  );
}

您也可以使用上下文来深入传递状态。

你可以看看最新的react docs beta，里面描述的很详细：

希望对你有所帮助！

如何在不同的反应组件中使用钩子？

How to use a hook in a different react component?

html

javascript

reactjs

react-hooks

use-state