Reactjs:如何在同一组件中将变量从一个渲染器访问到另一个渲染器

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      variable: 'Hello World'
    };
  }

  render() {
    return (
      <ChildComponent variable={this.state.variable} />
    );
  }
}

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

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

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      variable: 'Hello World'
    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.variable}>
        <ChildComponent />
      </MyContext.Provider>
    );
  }
}

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

// 安装redux和react-redux库
// 创建一个Redux store
import { createStore } from 'redux';

const initialState = {
  variable: 'Hello World'
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

const store = createStore(reducer);

// 父组件
class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent />
    );
  }
}

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

// 使用react-redux库的Provider组件将store传递给应用的根组件
import { Provider } from 'react-redux';

ReactDOM.render(
  <Provider store={store}>
    <ParentComponent />
  </Provider>,
  document.getElementById('root')
);