Question

我有一个关于React和React Router的问题。

说我有一个这样组织的应用程序：

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

（这不是完整功能的代码，我已经对其进行了简化。）假定Header包含一些我想要作为标题的内容，因此希望显示在每个页面路径上。

现在说我想根据“ / login”中的变量来更改标头，说这是一个名为“ loggedIn”的布尔型变量。当在“ / login”中按下登录按钮时，loginIn变量变为true。我现在想将此传递给标题。

我设置了一个回调函数：

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

，我可以确认它是否有效，因此App类中现在有一个变量，其中“ this.state.user” = true。假定对于下一个代码，这是正确的。请注意，这是在操纵“ /登录”页面上的信息之后完成的。如何将此传递到Header文件？我以为会这样：

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

因此，现在在Header.js文件中，我可以将其作为“ this.props.loggedIn”访问。但是由于某种原因它没有收到？这是因为Header只渲染一次，因此在第一次渲染之后不传递任何新道具吗？如果是这样，我该如何解决这个问题？

Answer 1

在React中，您从不直接更改状态。相反，您使用this.setState({ /* ... */ })。

this.setState告知React状态已更新，因此可以使用提供的新数据触发新的渲染周期。

如果需要，您可以了解有关Component State in the React documentation的更多信息。

在您的情况下：

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

Answer 2

不。这是因为您错误地设置了状态（ read more about setState）。提供

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

与您的App组件位于同一文件中。

替换

this.state.user = dataFromChildLogin;

与

this.setState({user: dataFromChildLogin});

React Router将道具传递到先前定义的元素

2 个答案: