использовать переменную в другом компоненте в Reactjs

Question

Мне нужно вызвать некоторую переменную в другом компоненте, чтобы я мог использовать ее при рендеринге с условиями (глобальная переменная)

код первого компонента:

class Connexion extends Component {
    constructor (props) {
        super(props);
        this.state = {
            // name: "",
          cnx_mail: '',
          cnx_pwd: '',
          items: [],
          errors: {},
          redirection : false,

          formErrors: {cnx_mail: '', cnx_pwd: ''},
          emailValid: false,
          passwordValid: false,
          formValid: false
        }

        this.handleUserInput = this.handleUserInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

    componentDidMount() { }

    handleSubmit = (event) => {
        event.preventDefault();
        fetch(`${API}/api/connexion`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',   
              },
            body: JSON.stringify ({
                email: this.state.cnx_mail,
                password: this.state.cnx_pwd,
            })
        })
        .then(res => res.json())
        .then(json => {
            this.setState({ items: json.result });

            // console.log("jsooon: ", json);
            localStorage.setItem('head', json.result.split('.')[0]);
            localStorage.setItem('payload', json.result.split('.')[1]);
            localStorage.setItem('signature', json.result.split('.')[2]);

            var roole = JSON.parse(atob(json.result.split('.')[1])).account[0].role ;
            // this.setState({ therole : roole });
            if(roole=== 'admin') {
                console.log("role admin : " , roole);
                console.log(json.result);
                this.setState({ redirection: true })
                // this.context.router.push('/accounts');
                //   return <Redirect to='/accounts' />
                // this.props.history.push('/accounts')

            }
            else {
                console.log("is user");
            }
        })
    }
...

Здесь я долженполучить значение "roole" и вызвать его в другом компоненте из его render() и создать условие, чтобы сказать

, если roole=="admin" отображает div1, в противном случае отображать div2

Answer 1

Если компонент, которому вы хотите передать реквизиты, является дочерним по отношению к этому, вам нужно использовать реквизиты, чтобы передать его. Пример:

<ChildComponent roole={this.roole}/>

В других случаях вам нужно использовать

this.props.history.push({
  pathname: '/your_path',
  state: { roole: this.roole }
})

Чтобы получить его, используйте:

this.props.location.state.roole

Answer 2

Вы можете передать эту переменную на страницу, куда вы хотите перенаправить, как это

this.props.history.push('/accounts', {roole})

// Access variable to redirected page
this.props.location.state.roole;`

Другой способ - вы можете сохранить эту роль в локальном хранилище и получить доступ к этому значению из локального хранилища.