在reactjs中，当子进程的状态改变时，如何改变父进程的状态？

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('initial state');

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

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Parent State: {parentState}</p>
      <ChildComponent onStateChange={handleChildStateChange} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React, { useState } from 'react';

function ChildComponent({ onStateChange }) {
  const [childState, setChildState] = useState('initial state');

  const handleChangeState = () => {
    const newState = 'new state';
    setChildState(newState);
    onStateChange(newState); // 调用父组件传递的回调函数
  };

  return (
    <div>
      <h2>Child Component</h2>
      <p>Child State: {childState}</p>
      <button onClick={handleChangeState}>Change State</button>
    </div>
  );
}

export default ChildComponent;