React 组件数据传递方法：Props、State 和 Context

在 React 组件中传递数据有以下几种方式：

Props（属性）：父组件通过属性的方式传递数据给子组件。子组件可以直接通过 props 对象访问传递过来的数据。关键语法：父组件中使用子组件时，在子组件标签上添加属性并赋值，子组件通过 this.props 来访问父组件传递的数据。

示例代码：父组件：

import React from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  render() {
    const data = 'Hello from parent!';
    return (
      <ChildComponent message={data} />
    );
  }
}

export default ParentComponent;

子组件：

import React from 'react';

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

export default ChildComponent;

State（状态）：组件内部通过 state 来存储和管理数据。state 是一个 JavaScript 对象，可以通过 this.state 来访问。可以通过调用 this.setState() 方法来更新 state 的值，并触发组件的重新渲染。关键语法：在组件的构造函数中初始化 state，通过 this.setState() 方法更新 state。

示例代码：

import React from 'react';

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

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

export default MyComponent;

Context（上下文）：Context 可以在组件树中共享数据，避免了通过 props 层层传递的麻烦。通过创建一个 Context 对象，然后在父组件中使用 Provider 组件来提供数据，子组件通过 Consumer 组件来获取数据。关键语法：创建一个 Context 对象，使用 Provider 组件提供数据，使用 Consumer 组件获取数据。

示例代码：

import React from 'react';

const MyContext = React.createContext();

class ParentComponent extends React.Component {
  render() {
    const data = 'Hello from context!';
    return (
      <MyContext.Provider value={data}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {value => <div>{value}</div>}
      </MyContext.Consumer>
    );
  }
}

export default ParentComponent;

以上是常用的组件中传递数据的方式，每种方式都有适用的场景和优缺点，根据具体情况选择合适的方式。