React -单击第三个组件时更新多个组件的状态

import React, { useState } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState({
    component1: false,
    component2: false,
    component3: false
  });

  const handleClick = () => {
    setState(prevState => ({
      ...prevState,
      component1: true,
      component2: true,
      component3: true
    }));
  };

  return (
    <div>
      <Component1 active={state.component1} />
      <Component2 active={state.component2} />
      <Component3 active={state.component3} onClick={handleClick} />
    </div>
  );
};

const Component1 = ({ active }) => (
  <div>{active ? 'Component 1 is active' : 'Component 1 is inactive'}</div>
);

const Component2 = ({ active }) => (
  <div>{active ? 'Component 2 is active' : 'Component 2 is inactive'}</div>
);

const Component3 = ({ active, onClick }) => (
  <div onClick={onClick}>{active ? 'Component 3 is active' : 'Component 3 is inactive'}</div>
);

export default ParentComponent;