在react中更改子组件状态

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

function ParentComponent() {
  const [childState, setChildState] = useState(false);

  const handleChangeChildState = () => {
    setChildState(!childState);
  };

  return (
    <div>
      <ChildComponent childState={childState} onChangeChildState={handleChangeChildState} />
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent({ childState, onChangeChildState }) {
  const handleClick = () => {
    onChangeChildState();
  };

  return (
    <div>
      <button onClick={handleClick}>更改子组件状态</button>
      <p>子组件状态：{childState ? '开启' : '关闭'}</p>
    </div>
  );
}

export default ChildComponent;