组件通讯：父组件向子组件传递数据

前端

2024-02-14 16:26:27

1. props简介

在React中，props是一个特殊的对象，它包含了父组件传递给子组件的数据。子组件通过props接收父组件传递的数据，并根据props中的数据渲染界面。

2. props的传递方式

在React中，父组件向子组件传递数据有两种方式：

通过函数传递：父组件将数据作为参数传递给子组件，子组件在函数中接收父组件传递的数据。
通过render函数传递：父组件在render函数中使用React.createElement函数创建子组件，并在React.createElement函数中将数据作为props传递给子组件。

3. props的使用

子组件在接收父组件传递的数据后，可以通过this.props访问props中的数据。this.props是一个只读对象，子组件不能修改props中的数据。

4. 示例

以下是一个父组件向子组件传递数据的示例：

class ParentComponent extends React.Component {
  render() {
    const data = {
      name: 'John Doe',
      age: 30,
    };

    return (
      <ChildComponent data={data} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <div>
        <h1>{data.name}</h1>
        <p>{data.age}</p>
      </div>
    );
  }
}