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

Question

我在将状态从子级发送到父级时遇到问题。 单击主组件中的菜单后，我想更改状态活动并将此活动发送到边栏组件，因为我想隐藏/显示边栏取决于 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>
      );
    }

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

Answer 2

使用 context api 和 hooks 不再需要钻孔。您可以简单地将父项和子项包装在上下文提供程序中，并利用 react 的 useContext 挂钩来管理 2 个组件之间的状态。 kent c dodds 有一篇很好的文章，里面有例子here