如何在 ReactJS 中更新父状态？

在 ReactJS 中，组件之间的数据传递是通过props实现的。由于React的单向数据流的特点，子组件无法直接修改父组件的状态。但是，一些情况下，我们需要通过子组件来改变父组件的状态。

这时候，我们可以通过在父组件中定义一个回调函数来解决这个问题。子组件通过触发回调函数，将需要修改的状态作为参数传递给父组件，父组件在回调函数中接收到该状态并设置到自己的状态中。

下面是一个简单的例子，说明如何在ReactJS中更新父状态。

父组件

import React, { useState } from "react";
import Child from "./Child";

function Parent() {
  const [parentState, setParentState] = useState("initial parent state");

  const updateParentState = (newState) => {
    setParentState(newState);
  };

  return (
    <div>
      <p>Parent State: {parentState}</p>
      <Child updateParentState={updateParentState} />
    </div>
  );
}

export default Parent;

在这个例子中，父组件Parent定义了一个表示自己状态的parentState，并且通过useState来对其进行初始化。在父组件中，我们还定义了一个回调函数updateParentState，该函数接收一个新的状态并将其设置到父状态中。

在组件的返回值中，我们展示了父状态，同时通过Child组件将updateParentState函数作为props传递给了子组件。

子组件

import React, { useState } from "react";

function Child(props) {
  const [childState, setChildState] = useState("initial child state");

  const updateChildState = (newState) => {
    setChildState(newState);
    props.updateParentState(newState);
  };

  return (
    <div>
      <p>Child State: {childState}</p>
      <button onClick={() => updateChildState("updated child state")}>
        Update States
      </button>
    </div>
  );
}

export default Child;

在子组件Child中，我们定义了一个表示自己状态的childState，同样通过useState进行初始化。在子组件中，我们还定义了一个回调函数updateChildState，该函数接收一个新的状态并将其设置到子状态中。另外，在该函数内部我们还调用了props.updateParentState(newState)，将新的状态传递给父组件的updateParentState函数。

在组件的返回值中，我们展示了子状态，并在按钮的onClick事件中触发updateChildState函数，从而将改变后的状态更新到父组件中。

至此，我们已经成功地通过子组件来更新了父组件的状态。当然，在实际开发中可能存在更为复杂的情况。但是，在这个例子中，我们已经掌握了解决这类问题的常用方法。