React中跨组件传值方式

React 中跨组件传值有多种方式，以下是几种常见的方式：

1. 父组件向子组件传递数据：通过 props 将数据传递给子组件，子组件通过 this.props 访问传递的数据。示例代码：

// 父组件
class Parent extends React.Component {
  render() {
    const data = 'hello';
    return <Child data={data} />;
  }
}

// 子组件
class Child extends React.Component {
  render() {
    const { data } = this.props;
    return <div>{data}</div>;
  }
}

2. 子组件向父组件传递数据：通过父组件传递函数给子组件，在子组件中调用该函数来传递数据。示例代码：

// 父组件
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ''
    };
    this.handleDataChange = this.handleDataChange.bind(this);
  }

  handleDataChange(data) {
    this.setState({ data });
  }

  render() {
    return <Child onDataChange={this.handleDataChange} />;
  }
}

// 子组件
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: 'hello'
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    const { onDataChange } = this.props;
    const { data } = this.state;
    onDataChange(data);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleChange}>传递数据</button>
      </div>
    );
  }
}

3. 使用 Context：Context 提供了一种在组件之间共享数据的方法，避免了通过 props 层层传递的复杂性。示例代码：

// 创建 Context
const MyContext = React.createContext();

// 父组件
class Parent extends React.Component {
  render() {
    const data = 'hello';
    return (
      <MyContext.Provider value={data}>
        <Child />
      </MyContext.Provider>
    );
  }
}

// 子组件
class Child extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {data => <div>{data}</div>}
      </MyContext.Consumer>
    );
  }
}