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

Posted 2023-02-23

【中文标题】React - 从另一个子组件更改子组件中的状态

【英文标题】：React - Change state in child component from another child component

【发布时间】：2020-06-05 08:40:54

【问题描述】：

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

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

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

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

【参考方案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）。

【参考方案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>
)

【讨论】：

感谢这个例子！我在上面编辑了我的答案以适应这一点。