上下文提供程序

Question

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

Answer 1

我认为要实现这一点，您需要使用“ React的上下文API”

上下文提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递道具。

上下文被设计为共享可被视为React组件树（例如当前经过身份验证的用户，主题或首选语言）的数据的“全局”数据。

// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current theme (with "light" as the default).
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

有关更多信息，请访问链接React context api

Answer 2

// 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）React Hooks（IN ALPHA）

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

Answer 3

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

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

我建议您通过遵循官方网站https://redux.js.org/basics/exampletodolist上的示例程序来学习Redux。

Answer 4

您可以在ReactJS中创建一个全局变量，但它不会使它在会话/本地存储上更“安全”。

我认为在React项目中创建全局变量根本不是最佳实践，这是因为以下原因：组件是否应跟踪此变量以进行任何更改？如果答案是肯定的，那么您正在查看的应该是“如何在React中管理全局状态” ，而不是“如何在React中创建全局变量”。

您可以使用 Redux 实现它。如官方文档所述，“ Redux是可预测的状态容器”，但您可以将其视为应用程序的全局状态容器。

您可以从以下网址中检出redux：https://redux.js.org/

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

4 个答案:

上下文提供程序

上下文使用者

A）当前标准

B）React Hooks（IN ALPHA）