如何使用上下文api将数据从一个组件传递到另一个组件

const MyContext = React.createContext();

<MyContext.Provider value={data}>
  {/* 子组件 */}
</MyContext.Provider>

<MyContext.Consumer>
  {value => (
    {/* 使用传递的数据 */}
  )}
</MyContext.Consumer>

import React from 'react';

const MyContext = React.createContext();

class ProviderComponent extends React.Component {
  state = {
    data: 'Hello World',
  };

  render() {
    return (
      <MyContext.Provider value={this.state.data}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

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

class App extends React.Component {
  render() {
    return (
      <ProviderComponent>
        <ConsumerComponent />
      </ProviderComponent>
    );
  }
}

export default App;