如何将 state 从子组件发送到 React 中的另一个组件

Question

我在将 state 从孩子发送给父母时遇到问题。 单击主要组件中的菜单后，我想更改 state active 并将此活动发送到 Sidebar 组件，因为我想隐藏/显示 Sidebar 取决于 css 中的活动 class。这在 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

您应该将 state 提升到第一个共同祖先组件，在您的情况下：App。 通过这种方式，您可以通过将 state 和突变 function (setActive) 作为道具传递给它的所有后代：

      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

Answer 2

使用上下文 api 和 hooks prop drilling 不再需要。 您可以简单地将父项和子项包装在上下文提供程序中，并利用 React 的 useContext 挂钩来管理 2 个组件中的 state。 kent c dodds 有一篇很好的文章， 这里有例子