Как получить доступ к состоянию вне компонента - PullRequest
Новая
       10

Как получить доступ к состоянию вне компонента

0 голосов
/ 29 ноября 2018

У меня есть компонент приложения, который я пытаюсь сделать PrivateRoute следующим образом: 

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

проблема в том, что this.state.auth находится внутри компонента приложения, а маршрут находится вне компонента, поэтомуУ меня нет доступа к нему, как я могу получить логическое значение из состояния?

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
  };

Как вы видите, состояние находится внутри компонента приложения, я хочу получить к нему доступ в PrivateRoute, как мне это сделать?

Ответы [ 3 ]

0 голосов
/ 29 ноября 2018

Вы можете использовать ref.

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

Где-то в коде 

console.log(this.my_ref.state)
0 голосов
/ 29 ноября 2018

Передайте состояние в свой компонент Маршрут / Частный маршрут через реквизиты: 

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

И получите доступ к нему ниже: 

const PrivateRoute = ({ component: Component, authed, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      authed === true ? <Component {...props} /> : <Redirect to="/" />
    }
  />
);
0 голосов
/ 29 ноября 2018

Для того чтобы родительское состояние использовалось в дочерних компонентах, оно должно быть передано как опора: 

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

Это может быть проблемой, если компонент глубоко вложен.

В качестве альтернативы, решения для глобального состояния (контекстный API, Redux и т. Д.) Должны использоваться для доступа к глобальному состоянию приложения во вложенных компонентах.

...