React:如何使用子组件的状态来影响父容器的样式？

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

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

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

  return (
    <div className={childState === 'active' ? 'active' : ''}>
      <ChildComponent childState={childState} onChildStateChange={handleChildStateChange} />
    </div>
  );
}

export default ParentComponent;

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

function ChildComponent({ childState, onChildStateChange }) {
  const handleClick = () => {
    const newState = childState === 'active' ? 'inactive' : 'active';
    onChildStateChange(newState);
  };

  return (
    <button onClick={handleClick}>Toggle State</button>
  );
}

export default ChildComponent;