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 : setShow ）。

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>
)