使用上下文全局存储变量React.js

Question

我想在 React.js 项目的所有文件中存储一个可变且可访问的全局变量，包括渲染 ApolloClient 的 index.js。起初，我想创建一个类，但我不确定如何实现它并跨多个页面保存变量的状态。经过研究，我发现了上下文的用途，但我不太理解文档。请告知最佳实践是什么。谢谢你。

编辑：

我尝试导入一个全局变量，但它不是可变的。我还尝试创建一个扩展 React.Component 的类，以访问

useState()

等功能，但如果我理解正确的话，这种性质的类必须返回一个组件。在更多地阅读 Context 后，我开始获得更多的理解，但我仍然不完全理解如何实现它。

我创建了一个文件AuthHandler：

import { createContext } from 'react';

export var AuthData = {
    id: createContext(0),
    auth: createContext("")
}

我想在组件函数中改变该数据，然后在index.js 中访问它。我该怎么做呢？

Answer 1

if u want to store a variable globally u can use context api or redux-tool 
kit
here i am giving a rough idea how u can achieve this using context API
first Create A folder usually context.. inside this create a file usually 
name as DataProvider.jsx and do thing like this

 ```import { createContext, useState } from 'react';

导出 const DataContext = createContext(null);

const DataProvider = ({ 子对象 }) => {

const [Client, setClient] = useState([]);


return (
    <DataContext.Provider value={{
       Client, setClient
    }}
    >
        {children}
    </DataContext.Provider>
)

}

导出默认的DataProvider； ````

next step u should wrap your app.js like this

  function App() {
  return (
  <DataProvider>
    <Home />
  </DataProvider>
  );
}


  export default App;```
   now u can setclient or u can use client data like below

  assume u have a file name Client.jsx where u want to set the client data
  enter code here

```const { setCleint} = useContext(DataContext);```
set the Client data to setClient just as normal state
now in similar way u can render the client list anywhere like this

```const { Cleint} = useContext(DataContext);```