Question

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

我使用UseState和一个名为openHandler的功能来验证侧边栏是否处于活动状态，以切换侧边栏。

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

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

这是我在说什么的SandBox示例。

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

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

预先感谢

Answer 1

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

appjs

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

cartBox.js

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

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

很不错

Answer 2

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

如果是这种情况，则需要将useState挂钩放在较高级别的父级中，然后将state /一个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>
   )

导航栏 / HumburgerIcon

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>
}

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

React-调用其他组件的功能

2 个答案: