React - 从另一个子组件更改子组件中的状态

Question

当单击另一个子组件中的按钮时，我需要更改一个子组件中的状态。两个孩子都有相同的父组件。

import React from "react":
import A from "...";
import B from "...";

class App extends React.Component {
    render() {
        <div>
            <A />
            <B /> 
        </div>
    }
}

在这个例子中，当组件A中的按钮被按下时，组件B中的状态需要改变。

Answer 1

该应用程序听起来像是“提升状态”的完美用例，即在父组件中保留主状态。然后，您基本上只需将处理程序（以更改父状态）传递给组件 A（这将成为按钮的 onClick 处理程序），然后将要显示的状态传递给组件 B。

当您单击按钮时，父组件中会调用 setState，它会自动重新渲染 props 发生更改的所有子组件（包括组件 B）。

以下是更详细的信息：https://reactjs.org/docs/lifting-state-up.html

编辑：下面的回复提醒我，我可能应该添加一些代码来说明 - 但我做了一些更改来简化事情。

import React, {useState} from "react":
import A from "...";
import B from "...";

const App = () => {
    const [show, setShow] = useState(false);

    function handleToggle() {
      // Decouple the implementation of the parent state change from the child
      // Pass a function to change the state (async/batching reasons)
      setShow(show => !show);
    }

    return (
        <div>
            <A show={show} onToggle={handleToggle} />
            <B show={show} onToggle={handleToggle} /> 
        </div>
    )
}

const A = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

const B = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

所以基本上我们不关心父级的状态如何改变。我们只知道当单击子组件中的按钮时，我们想要触发该更改。所以我们真正要做的就是调用通过 props 传递下来的函数 - 我们不必传递任何参数。

然后，父级将处理handleToggle函数内的任何点击，并且您可以在将来更改此实现，而子级不知道任何事情。也许您想更改为使用 mobx 来处理状态，或者在最终更改状态之前运行一些其他代码。既然两者都解耦了，那就好了！我还调整setShow为使用函数（此处描述的好处：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous）。