// 父组件
class ParentComponent extends React.Component {
  render() {
    const btnValue = "按钮的值";
    return <ChildComponent value={btnValue} />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return <button>{this.props.value}</button>;
  }
}

// 定义 Redux 的 state
const initialState = {
  buttonValue: "按钮的值",
};

// 定义 Redux 的 reducer
function reducer(state = initialState, action) {
  // ...
}

// 使用 Redux 的 Provider 包裹根组件
ReactDOM.render(
  <Provider store={createStore(reducer)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// 子组件
class ChildComponent extends React.Component {
  render() {
    return <button>{this.props.buttonValue}</button>;
  }
}

// 通过 connect 函数连接 Redux 的 state 到组件的 props
export default connect((state) => ({ buttonValue: state.buttonValue }))(ChildComponent);

// 创建上下文
const ButtonValueContext = React.createContext();

// 父组件
class ParentComponent extends React.Component {
  render() {
    const btnValue = "按钮的值";
    return (
      <ButtonValueContext.Provider value={btnValue}>
        <ChildComponent />
      </ButtonValueContext.Provider>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <ButtonValueContext.Consumer>
        {(value) => <button>{value}</button>}
      </ButtonValueContext.Consumer>
    );
  }
}