Javascript 在React中提升道具的正确方法是什么？

如果我在标题中的措辞有误，我道歉。最近我的应用程序中出现了cookies。我的Topnav组件需要访问它们，但我不确定如何将它们送到那里

App.js-

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Landing from './pages/Landing.js';
import LoginPage from './pages/LoginPage.js';
import Topnav from './pages/components/global/Topnav.js';
import './Global.css';

const App = props => (
  <div>
    <Topnav />
    <Switch>
      <Route exact path='/'      component={Landing} />
      <Route exact path='/login' component={LoginPage} />
    </Switch>
  </div>
);

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“./pages/Landing.js”导入登录；
从“/pages/LoginPage.js”导入LoginPage；
从“/pages/components/global/Topnav.js”导入Topnav；
导入“/Global.css”；
const App=props=>(
);
导出默认应用程序；

我的登录组件从express（fetch）中获取cookie，然后执行

这将加载我的登录页，在那里我可以抓取cookie，但是如何将cookie发送到Topnav？我在堆栈上看到了类似这样的答案，似乎App.js抓住了cookie并将其作为道具传递给组件，但我不知道如果它永远不会刷新，它怎么会这样。我曾考虑过强制整个窗口刷新（当我手动刷新时，它对Topnav有效），但我也看到了这里的答案，即不要这样做

使用上下文 您需要使用react中的新上下文挂钩

创建上下文 这是一个您可以在应用程序周围访问的上下文

const MyContext=React.createContext（defaultValue）

提供服务
围绕主应用程序包装提供商


在获取cookies的位置访问上下文
在登录和top nav中都使用此选项，以使用上下文中的值

const value=useContext（MyContext）
有多种方法可以实现这一点

可能是初学者友好型的

当您的登录组件成功登录时，您需要向
应用程序
组件发出有关登录的信号，可能需要使用
onloginssuccessful
，该组件随后可以读取cookie并使用它执行
setState
，并在您的
Topnav
和
登录的道具中使用此组件状态值组件
我明白了！非常感谢。我在socket.io中使用了上下文，所以我应该想到这一点。干杯老实说，这是一种简单的方法，因为上下文api在react中已经可用，不需要设置。但是如果你需要做更多的事情，比如使用ReDux。它现在也使用了钩子，但有更简单的方法从你的应用程序中的任何地方获取和更改数据。我正在建立一个投资组合，因为我想让这成为我的职业。我已经看到大多数的广告确实想要Redux体验，但我认为在进入更深层的库之前知道如何使用basic React会更好。你是说我最好还是直接跳进Redux？老实说，我还没有仔细研究过。我对使用多个上下文有点困惑。听起来Redux简化了这一点。我不会说它更简单，人们实际上发现Redux中的样板文件太复杂了。我要说的是，坚持按原样反应，学会用钩子钩住它们。再次感谢你，乔。我会坚持对这个项目的反应，并很快在Redux上观看一些视频，以了解它是什么。我现在真的很好奇。我现在要讲上下文。这一系列视频，尤其是这段视频，确实帮助我们了解了如何使用上下文，如果其他人对此感到困惑的话。再次感谢乔·劳埃德的指导。