Блог

У меня проблема с отправкой состояния от дочернего элемента к родительскому. После нажатия на меню в главном компоненте я хочу изменить состояние active и отправить это active в компонент боковой панели, потому что я хочу скрыть / показать боковую панель, зависящую от активного класса из css. В Vanilla JS это просто, но в React я немного запутался.

Главная:

 import Menu from "./Menu";

import "./Styles.css";

import teamsdb from "./teamsdb";

const Main = ({ name }) => {
  
  return (
    <div>
      <Menu />
      <h1>Main</h1>
      <h4>{teamName}</h4>
    </div>
  );
};
  

Меню:

 const Menu = () => {
  const [active, setActive] = useState(false);
  const changeMenu = () => {
    setActive(!active);
  };
  return <button onClick={changeMenu}>Menu</button>;
};

export default Menu;
  

Боковая панель:

 const Sidebar = () => {
  const [searchTerm, setSearchTerm] = React.useState("");
  const handleChange = e => {
    setSearchTerm(e.target.value);
    console.log("Search: ", e.target.value);
  };

  return (
    <div className={active ? 'sidebar active' : 'sidebar'}>
      <div className="sidebar__header">
        Header
        <button>Colors</button>
      </div>
      <div className="sidebar__search">
        <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
        />
      </div>
      <Teams search={searchTerm} />
    </div>
  );
};
  

App.js

 import React from "react";
import "./App.css";
import Sidebar from "./components/Sidebar";
import Main from "./components/Main";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";    
function App() {
      return (
        <div className="App">
          <div className="app__body">
            <Router>
              <Sidebar />
              <Switch>
                <Route path="/team/:teamId">
                  <Main />
                </Route>
                <Route exact path="/">
                  <Main />
                </Route>
              </Switch>
            </Router>
          </div>
        </div>
      );
    }
  

Вы должны поднять свое состояние до первого общего компонента-предка, в вашем случае: App. Таким образом, вы можете использовать его во всех его потомках, передав состояние и функцию мутации (SetActive) в качестве prop:

       App    // Put active state here, pass down active and setActive as prop
       ^
       |
   ---- ----- 
  |          |
              
Sidebar     Main  // Pass down active and setActive as prop
             ^
             |
             |
            Menu  // Use setActive to modify state in App

  

Это объясняется в документации React:https://reactjs.org/docs/lifting-state-up.html

С контекстным api и хуками больше не требуется сверление реквизитов. Вы можете просто обернуть родительский и дочерний компоненты в поставщике контекста и использовать перехватчик useContext от react для управления состоянием между 2 компонентами. у Кента си Доддса есть хорошая статья с примерами здесь