如何从子组件内部更改父组件的背景颜色

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

function ParentComponent() {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  const handleColorChange = (newColor) => {
    setBackgroundColor(newColor);
  };

  return (
    <div style={{ backgroundColor }}>
      <h1>Parent Component</h1>
      <ChildComponent backgroundColor={backgroundColor} onColorChange={handleColorChange} />
    </div>
  );
}

export default ParentComponent;

import React, { useState } from 'react';

function ChildComponent({ backgroundColor, onColorChange }) {
  const [childBackgroundColor, setChildBackgroundColor] = useState(backgroundColor);

  const handleChildColorChange = (newColor) => {
    setChildBackgroundColor(newColor);
    onColorChange(newColor);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="color" value={childBackgroundColor} onChange={(e) => handleChildColorChange(e.target.value)} />
    </div>
  );
}

export default ChildComponent;