难以向下传递道具到组件，特别是向下两层- React Router、Javascript

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

// 父组件
class ParentComponent extends React.Component {
  render() {
    const sharedData = "共享的数据";
    return (
      <MyContext.Provider value={sharedData}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <MyContext.Consumer>
        {sharedData => (
          <GrandchildComponent sharedData={sharedData} />
        )}
      </MyContext.Consumer>
    );
  }
}

// 孙子组件
class GrandchildComponent extends React.Component {
  render() {
    // 使用共享的数据
    const sharedData = this.props.sharedData;
    return <div>{sharedData}</div>;
  }
}