主要应用程序如下所示：
import Cookies from 'js-cookie';
function App() {
let cookie = Cookies.get('mycookie');
return (
<>
<Router>
<div>
{<Switch>
<Route path="/comp1">
<Comp1 />
</Route>
<Route path="/comp2">
<Comp2 />
</Route>
</Switch>
</div>
</Router>
</div>
);
}
如您所见，在主应用程序中，我正在读取Cookie。现在，所有组件都需要访问cookie。我该如何使组件从主应用程序读取Cookie？当然，我可以使用“ Cookies.get”读取Cookie。但是，由于我要在App.js中做其他事情，而不是只读取cookie，所以我宁愿在App.js中做一次操作，然后与组件共享所有这些信息。
您可以将其作为道具传递给需要它的孩子/后裔
import Cookies from 'js-cookie';
function App() {
let cookie = Cookies.get('mycookie');
return (
<div>
<Router>
<div>
{<Switch>
<Route path="/comp1">
<Comp1 cookie={cookie} />
</Route>
<Route path="/comp2">
<Comp2 />
</Route>
</Switch>}
</div>
</Router>
</div>
);
}
在组件中通过道具访问
const { cookie } = props;
或者，您可以使用Context API并创建Cookie上下文
export const CookieContext = React.createContext();
应用程式
import Cookies from 'js-cookie';
function App() {
let cookie = Cookies.get('mycookie');
return (
<div>
<Router>
<div>
<CookieContext.Provider value={cookie}>
{<Switch>
<Route path="/comp1">
<Comp1 />
</Route>
<Route path="/comp2">
<Comp2 />
</Route>
</Switch>}
</CookieContext.Provider>
</div>
</Router>
</div>
);
}
内部组件
import { CookieContext } from './CookieContext';
const cookie = useContext(CookieContext);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句