【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>;}
}