如何使用钩子在React组件之间传递状态？

import React, { useState, useEffect } from 'react';

const ParentComponent = () => {
  const [state, setState] = useState('');

  useEffect(() => {
    // 在这里可以监听状态的变化
    console.log('状态已更新:', state);
  }, [state]);

  const handleStateChange = (newState) => {
    setState(newState);
  };

  return (
    <div>
      <ChildComponent state={state} onStateChange={handleStateChange} />
    </div>
  );
};

const ChildComponent = ({ state, onStateChange }) => {
  const handleClick = () => {
    // 更新状态
    onStateChange('新的状态');
  };

  return (
    <div>
      <p>当前状态: {state}</p>
      <button onClick={handleClick}>更新状态</button>
    </div>
  );
};

export default ParentComponent;