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

上述答案的补充：

match serde_json::from_str(data) {
    // ...
}

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

2 个答案: