javascript - Reactjs - 渲染登录组件

Question

我正在关注this tutorial关于 react 路由。我设法将其连接到我的数据存储，并且工作正常。

令我困扰的是登陆页面。我的方式set it up ( fiddle )当用户转到根页面时，会显示登录链接。当用户单击该登录时，将显示登录表单组件。

我想避免点击登录链接。当用户导航到根页面时，如果没有登录，则自动显示登录组件。

这个Fiddle显示了我徒劳的尝试让它发挥作用。 以前有效的代码:

render() {
return (
  <div>
    <ul>
      <li>
        {this.state.loggedIn ? (
          <Link to="/logout">Log out</Link>
        ) : (
          <Link to="/login">Sign in</Link>
        )}
      </li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/dashboard">Dashboard</Link> (authenticated)</li>
    </ul>
    {this.props.children || <p>You are {!this.state.loggedIn && 'not'} logged in.</p>}
  </div>
)
}

这是我的尝试:

 render() {
return (
   <Login data={this.state} />
)
}

这实际上呈现了登录组件，但会产生以下错误:

Uncaught TypeError: Cannot read property 'state' of undefined

似乎已断开连接。

我已经为此苦恼了一段时间，感谢任何帮助

Answer 1

按照 data={something} 的方式将变量传递给子级称为 props .

您可以访问data从内部<Login />组件 this.props.data

我强烈建议您阅读此内容:https://github.com/uberVU/react-guide/blob/master/props-vs-state.md