React组件通信-父子组件间的通信

在React中，父子组件间的通信可以通过props（属性）来实现。父组件可以通过props将数据传递给子组件，子组件通过props接收这些数据。如果子组件需要向父组件传递信息，它可以调用一个回调函数，这个回调函数由父组件提供并传递给子组件。

以下是一个简单的例子：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';
 
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello from Parent' };
    this.handleChildMessage = this.handleChildMessage.bind(this);
  }
 
  handleChildMessage(childMessage) {
    console.log('Message from Child:', childMessage);
  }
 
  render() {
    return (
      <div>
        <ChildComponent 
          parentMessage={this.state.message} 
          onChildMessage={this.handleChildMessage}
        />
      </div>
    );
  }
}
 
// 子组件
const ChildComponent = ({ parentMessage, onChildMessage }) => {
  const sendMessageToParent = () => {
    onChildMessage('Hello from Child');
  };
 
  return (
    <div>
      <p>{parentMessage}</p>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
};
 
export default ParentComponent;

在这个例子中，ParentComponent 是父组件，它有一个状态 message，它通过props parentMessage 传递给子组件 ChildComponent。子组件有一个按钮，当点击时，它调用一个函数 sendMessageToParent，这个函数通过props onChildMessage 回调传递信息给父组件。父组件有一个方法 handleChildMessage，它通过props接收子组件的信息并在控制台打印。