使react读取在根组件外部定义的外部变量

 // 根组件

 function App(props) {

   return <div>{props.externalVariable}</div>;

 }

 // 渲染根组件

 ReactDOM.render(<App externalVariable={externalVariable} />, document.getElementById('root'));

 ```

 // 外部定义的变量

 const externalVariable = 'Hello, World!';

 // 根组件

 function App() {

   return (

     <ExternalVariableContext.Provider value={externalVariable}>

       <ChildComponent />

     </ExternalVariableContext.Provider>

   );

 }

 // 子组件

 function ChildComponent() {

   const externalVariable = React.useContext(ExternalVariableContext);

   return <div>{externalVariable}</div>;

 }

 // 渲染根组件

 ReactDOM.render(<App />, document.getElementById('root'));

 ```

 // 创建 Redux store

 import { createStore } from 'redux';

 // 外部定义的变量

 const externalVariable = 'Hello, World!';

 // 定义 reducer

 function reducer(state = externalVariable, action) {

   return state;

 }

 // 创建 store

 const store = createStore(reducer);

 // 根组件

 function App() {

   return (

     <Provider store={store}>

       <ChildComponent />

     </Provider>

   );

 }

 // 子组件

 import { connect } from 'react-redux';

 function ChildComponent(props) {

   return <div>{props.externalVariable}</div>;

 }

 // 连接子组件到 Redux store

 const mapStateToProps = (state) => ({

   externalVariable: state,

 });

 export default connect(mapStateToProps)(ChildComponent);

 // 渲染根组件

 ReactDOM.render(<App />, document.getElementById('root'));

 ```