React - 调用其他组件的功能答案

【问题标题】：React - Calling the function of other componentReact - 调用其他组件的功能
【发布时间】：2020-04-04 23:19:21
【问题描述】：

我对 React 非常陌生。其实我今天开始学习了。我想在网站中构建一个侧边栏组件。

我使用 UseState 切换侧边栏，并且一个名为 openHandler 的函数用于验证侧边栏是否已处于活动状态。

我想知道我应该如何处理侧边栏内的切换。如果所有句柄都在主文件（App.js）中完成，我应该如何更改侧边栏的状态

如果这个问题没有意义，我真的很抱歉。

这是我所说的沙盒示例。

https://codesandbox.io/s/hopeful-framework-c4k1h

如果有人知道我应该学什么玩那就太好了。

提前致谢

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您可以通过道具将主处理程序传递给侧边栏并将其绑定到内部切换。

appjs

    ...
 <CartBox openHandler= {openHandler} className={ToggleCartState} />
    ...

cartBox.js

    ...
 <Toggle click={props.openHandler} />
    ...

很高兴阅读https://reactjs.org/docs/lifting-state-up.html

【讨论】：

【解决方案2】：

我假设您希望能够通过单击同级组件的另一个同级/子级的按钮来更改侧边栏的状态。

如果是这种情况，您需要将 useState 钩子放在更高级别的父级中，然后将状态 / 它的 setter 方法作为道具传递给将使用它的子级。

这是我的意思的一个例子。

父组件

function parent() {
   // the sidebar state
   const [sidebar, setSidebar] = useState(false);

   // helper function that toggles state
   function toggle() {
      setSidebar(!sidebar);
   }

   return (
      <section className="Parent">
         { /* Conditional Render */
            sidebar ? 
               <Navbar stateManager={{toggle}} /> 
               : <HamburgerIcon stateManager={{toggle}}  />
         }
      </section>
   )

导航栏 / 汉堡图标

function Navbar({stateManager}) {
   // you now passed state and it's set method to the child
   const {toggle} = stateManager;

   return (
      <div onClick={toggle}>
        component content
      </div>
}

您可以将它们全部放在同一个文件中，并且仍然执行相同的操作。

【讨论】：