如何在react中更改父母时保留孩子的状态？

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

function ParentComponent() {
  const [parentState, setParentState] = useState('父组件状态');

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

  return (
    <div>
      <h2>父组件</h2>
      <p>父组件状态: {parentState}</p>
      <ChildComponent parentState={parentState} onParentStateChange={handleParentStateChange} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ parentState, onParentStateChange }) {
  const handleButtonClick = () => {
    // 更改父组件状态
    onParentStateChange('新的父组件状态');
  };

  return (
    <div>
      <h3>子组件</h3>
      <p>父组件传递的状态: {parentState}</p>
      <button onClick={handleButtonClick}>更改父组件状态</button>
    </div>
  );
}

export default ChildComponent;