如何访问组件外部的状态

Question

我有一个 App 组件，我正在尝试像这样创建一个 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
  };

正如你所见，state 在 App 组件内部，我想在 PrivateRoute 中访问它，我该怎么做？

Answer 1

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

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

如果组件嵌套很深，这可能会出现问题。

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

Answer 2

您可以使用 ref。

<PrivateRoute ref={i => this.my_ref = i} />

代码中的某处

console.log(this.my_ref.state)

Answer 3

通过道具将状态传递到您的 Route/Private 路由组件：

<App>
   <PrivateRoute authed={this.state.auth} ... />
</App>

并在下面访问它：

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

如何访问组件外部的状态

How to access state outside of a component

router

state

reactjs