组件传值

组件传值是指在 React 应用中，通过 props 属性将数据从一个组件传递给另一个组件。有两种类型的组件传值：父子组件之间传值和兄弟组件之间传值。

1. 父子组件之间传值

父组件可以通过 props 属性向子组件传递数据，子组件可以通过 this.props 获取数据。例如：

// 父组件
import React from 'react';
import Child from './Child';

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child name="Tom" />
      </div>
    );
  }
}

// 子组件
import React from 'react';

class Child extends React.Component {
  render() {
    return (
      <div>
        <p>My name is {this.props.name}</p>
      </div>
    );
  }
}

2. 兄弟组件之间传值

兄弟组件之间的传值需要使用共同的父组件作为中介。父组件将数据传递给子组件 A，子组件 A 将数据传递给子组件 B。例如：

// 父组件
import React from 'react';
import ChildA from './ChildA';
import ChildB from './ChildB';

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: 'Hello World' };
  }

  render() {
    return (
      <div>
        <ChildA data={this.state.data} />
        <ChildB data={this.state.data} />
      </div>
    );
  }
}

// 子组件 A
import React from 'react';

class ChildA extends React.Component {
  render() {
    return (
      <div>
        <p>ChildA: {this.props.data}</p>
      </div>
    );
  }
}

// 子组件 B
import React from 'react';

class ChildB extends React.Component {
  render() {
    return (
      <div>
        <p>ChildB: {this.props.data}</p>
      </div>
    );
  }
}