时间戳

首页 > 解决方案 > 如何访问组件外部的状态

reactjs - 如何访问组件外部的状态

问题描述

我有一个应用程序组件，我试图像这样制作一个 PrivateRoute：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      this.state.auth === true ? <Component {...props} /> : <Redirect to="/" />
    }
  />
);

问题是 this.state.auth 在 App 组件内，而 Route 在组件外，所以我无权访问它，如何从状态中获取布尔值？

PS。你不明白这个问题：这是我要澄清的代码：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  Switch
} from 'react-router-dom';
import './App.scss';
import ChangePass from './components/ChangePass';
import MManager from './components/MManager';
import Mworker from './components/Mworker';
import Mclient from './components/Mclient';
import Login from './components/Login';
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      this.state.auth === true ? <Component {...props} /> : <Redirect to="/" />
    }
  />
);

class App extends Component {
  state = {
    id: '',
    password: '',
    role: '',
    token: '',
    firstName: '',
    lastName: '',
    auth: false,
    error: false
  };

如您所见，状态在 App 组件内部，我想在 PrivateRoute 中访问它，我该怎么做？

标签： reactjsstaterouter

解决方案

为了在子组件中使用父状态，它应该作为道具传递：

<PrivateRoute auth={this.state.auth} component={...} />

如果组件嵌套很深，这可能是个问题。

或者，应该使用全局状态解决方案（上下文 API、Redux 等）来访问嵌套组件中的全局应用程序状态。

推荐阅读