如何在React中将状态从子组件发送到另一个组件

Question

我在将状态从孩子发送到家长方面遇到了问题。点击主组件中的菜单后，我想改变状态active并将此active发送到侧边栏组件，因为我想隐藏/显示侧边栏取决于CSS中的active类。在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>
  );
};

应用程序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>
      );
    }

Answer 1

您应该将状态提升到第一个公共祖先组件，在您的例子中是：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