React - вызов функции другого компонента

Question

Я очень очень новичок в React. На самом деле я начал учиться сегодня. Я хочу создать один компонент боковой панели на веб-сайте.

Я переключаю боковую панель, используя UseState и функцию openHandler, которая проверяет боковую панель, уже активна.

Мне интересно, как мне подойти к переключателю внутри боковой панели. Как мне изменить состояние боковой панели, если вся ручка сделана в основном файле (Приложение. js)

Мне очень жаль, если этот вопрос не имеет смысла.

Вот пример SandBox, о котором я говорю.

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

Если кто-то знает, чему мне научиться играть, это было бы здорово .

Заранее спасибо

Answer 1

Я предполагаю, что вы хотите изменить состояние боковой панели, нажав кнопку у другого родного / дочернего элемента родственного компонента.

, если это так, вам нужно установить хук useState. в вышестоящем родителе, затем передайте состояние / метод установки в качестве опоры детям, которые будут его использовать.

Вот пример того, что я имею в виду.

Родительский компонент

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

Вы можете поместить их все в один файл и при этом выполнить то же самое.

Answer 2

Вы можете передать основной обработчик на боковую панель с помощью реквизита и привязать его к переключателю инсайдера.

app js

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

cartBox. js

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

Приятно читать https://reactjs.org/docs/lifting-state-up.html