【React学习】React父子组件通讯

1. 父到子传值

在React框架中，父组件可以通过 props 将数据传递给子组件。子组件通过读取 props 来访问父组件传递过来的数据。

当父组件的 props 发生变化时，React 会自动重新渲染子组件以确保子组件中使用的数据保持同步。

父组件

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  render() {
    const data = "Hello from Parent";
    return <ChildComponent message={data} />;
  }
}

子组件

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

2. 子到父传值

在父组件中定义一个函数，将该函数作为 props 传递给子组件，子组件可以调用该函数并将该数据作为参数传递回父组件。

父组件

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  handleDataFromChild = (data) => {
    // 处理来自子组件的数据
    console.log("Data from child:", data);
  }

  render() {
    return <ChildComponent sendDataToParent={this.handleDataFromChild} />;
  }
}

子组件

import React, { Component } from 'react';

class ChildComponent extends Component {
  sendDataToParent = () => {
    const data = "Hello from Child";
    this.props.sendDataToParent(data);
  }

  render() {
    return <button onClick={this.sendDataToParent}>Send Data to Parent</button>;
  }
}