如何创建一个可以在 React 的不同组件中访问的全局变量？

Question

我从服务器获取用户名，我想使用来自其他组件的相同用户名。我知道会话存储是处理它的方法之一，但出于安全原因我不想使用。我们如何在反应中创建一个全局对象？

Answer 1

// most simplistic
window.myAppData = {
  userName: 'chad123',
  language: 'EN',
  // other stuff
};

window.myAppData.userName // 'chad123'

但大多数应用程序需要更复杂的东西。您可以使用 React 上下文。

https://reactjs.org/docs/context.html

上下文提供者

// create context provider and consumer
const UserContext = React.createContext();
export default UserContext;

// wrap part of your app (or whole app) 
// with Provider that needs access to user
class App extends React.Component {
  constructor() {
    super();
    this.state = {
       user: null  
    };
  }

  componentDidMount() {
    yourUserAPI().then(user => this.setState({ user }));
  }

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        <MyComponent />
      </UserContext.Provider>
    );
  }
}

上下文消费者

A) 现行标准

// use anywhere in your app like this
// PS! must be descendant of Provider
class MyComponent extends React.Component {
  render() {
    return (
      <UserContext.Consumer>
        {user => {
          // do stuff with 'user'
        }}
      </UserContext.Consumer>
    );
  }
}

B) 反应钩子 (IN ALPHA)

// only works with functional 
// components (no classes)
function MyComponent() {
  const user = React.useContext(UserContext.Consumer);
  // do stuff with 'user'
  return 'something';
}

Answer 2

你需要像 Redux 这样的全局状态管理。

一旦完成此设置，您就可以将全局状态映射到本地组件道具并像访问任何其他道具一样访问它：this.props.globalUsername。

我建议你按照官方网站https://redux.js.org/basics/exampletodolist上的示例程序来学习 Redux