【React的组件&组件间的通信(父向子，子向父，同级组件通信)】

import React, { useState } from 'react';
 
// 父组件
const ParentComponent = () => {
  const [message, setMessage] = useState('');
 
  // 更新状态的函数，将由子组件调用
  const updateMessage = (newMessage) => {
    setMessage(newMessage);
  };
 
  return (
    <div>
      <h1>父组件的消息: {message}</h1>
      {/* 子组件通过props接收updateMessage函数和message */}
      <ChildComponent updateMessage={updateMessage} />
    </div>
  );
};
 
// 子组件
const ChildComponent = ({ updateMessage }) => {
  // 使用useState钩子来管理本地状态
  const [childMessage, setChildMessage] = useState('');
 
  // 更新父组件的状态并清除子组件的状态
  const sendMessageToParent = () => {
    updateMessage(childMessage);
    setChildMessage('');
  };
 
  return (
    <div>
      <input value={childMessage} onChange={(e) => setChildMessage(e.target.value)} />
      <button onClick={sendMessageToParent}>发送消息给父组件</button>
    </div>
  );
};
 
export default ParentComponent;

这个例子展示了如何在React组件中使用hooks（useState）来管理状态，并通过props在组件之间发送和接收信息。父组件通过props将一个更新状态的函数传递给子组件，子组件可以在需要时调用这个函数来更新父组件的状态。这是React中常用的组件间通信方式之一。