时间戳

首页 > 解决方案 > 在 React 中提升 props 的正确方法是什么？

javascript - 在 React 中提升 props 的正确方法是什么？

问题描述

如果我在标题中的措辞有误，我深表歉意。我最近在我的应用程序中添加了 cookie。我的 Topnav 组件需要访问它们，但我不确定如何让它们到达那里。

应用程序.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;

我的登录组件从 express (fetch) 中获取 cookie，然后执行<Redirect to='/' /> 这加载我的登陆页面，我可以在其中获取 cookie，但是如何将 cookie 获取到 Topnav？我在堆栈上看到了类似这样的答案，看起来 App.js 抓取了 cookie 并将其作为道具传递给组件，但我不知道如果它永远不会刷新它会如何。我曾考虑过强制刷新整个窗口（当我手动刷新时，这对 Topnav 有效），但我也在这里看到了说不要那样做的答案。

标签： javascriptreactjs

解决方案

有多种方法可以解决这个问题。

可能是一个初学者友好的。

当您的登录组件成功登录时，您App可能需要使用 a 向组件发出信号，onLoginSuccessful然后它可以读取 cookie 并对其进行操作，并在您和组件setState的道具中使用此组件状态值TopnavLanding

推荐阅读