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，它会自动重新渲染道具更改的所有子组件（包括组件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）。

Answer 2

以上答案的补充：

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

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <div>
            <A show={show} setShow={setShow} />
            <B show={show} setShow={setShow} /> 
        </div>
    )
}

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

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