React Router передает реквизиты ранее определенному элементу

Question

У меня вопрос по поводу React и React Router.

Скажем, у меня есть приложение, которое организовано так:

class App extends Component {
  render(){
    return (
    <Header/>
    <Route path= "/" />
    <Route path="/login" />
    <Route path= "/anotherPage" />
    )
  }
}

(Это не полностью функциональный код, я упростил его.) Предположим, что заголовок содержит что-то, что я хочу в качестве заголовка, и, следовательно, хочу отображаться на каждом пути страницы.

Теперь скажите, что я хочу изменить заголовок в зависимости от переменной внутри "/ login", скажем, что это логическая переменная с именем "loggedIn". Когда кнопка входа в систему нажата внутри «/ login», переменная loggedIn становится истинной. Я хочу передать это Заголовку сейчас.

Я установил функцию обратного вызова:

 myCallbackLogin = dataFromChildLogin => {
   this.state.user = dataFromChildLogin;
 }

и я могу подтвердить, что это работает, поэтому в классе App теперь есть переменная, где "this.state.user" = true. Предположим, что это верно для следующего кода. Обратите внимание, что это делается после манипулирования информацией со страницы "/ login". Как передать это в файл заголовка? Я предполагал, что это будет сделано так:

class App extends Component {
  render(){
    return (
    <Header loggedIn={this.state.loggedIn} />
    <Route path= "/" />
    <Route path="/login" />
    <Route path= "/anotherPage" />
    )
  }
}

так что теперь, в файле Header.js, я могу получить доступ к этой переменной как "this.props.loggedIn". Но по какой-то причине он не получает это? Это потому, что Заголовок отображается только один раз и, следовательно, не пропускает никаких новых реквизитов после первого отображения? Если да, то как я могу решить эту проблему?

Answer 1

В React вы никогда не изменяете состояние напрямую. Вместо этого вы используете this.setState({ /* ... */ }).

this.setState сообщает React, что состояние обновлено и, следовательно, может инициировать новый цикл рендеринга с предоставленными новыми данными.

Если вы хотите, вы можете узнать больше о Состояние компонента в документации React .

В вашем случае:

myCallbackLogin = dataFromChildLogin => {
  this.setState({ user: dataFromChildLogin });
}

Answer 2

Нет. Это потому, что вы устанавливаете состояние неправильно ( Подробнее о setState ). При условии

myCallbackLogin = dataFromChildLogin => {
   this.state.user = dataFromChildLogin;
 }

находится в том же файле, что и ваш компонент приложения.

заменить

this.state.user = dataFromChildLogin;

с

this.setState({user: dataFromChildLogin});