Reactjs - 渲染登录组件

Question

我正在关注反应路由的this tutorial。我设法将它连接到我的数据存储，它工作正常。

令我困扰的是登陆页面。我有set it up（小提琴）它的方式，当用户转到根页面时，显示链接到登录。当用户单击该登录名时，会显示登录表单组件。

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

这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。

您可以从<Login />组件内的this.props.data

我强烈建议你阅读这篇访问data：https://github.com/uberVU/react-guide/blob/master/props-vs-state.md

Answer 2

在你的小提琴来看，我认为这是你想要做的笏。

function requireAuth(nextState, replace) { 

    if (!auth.loggedIn()) { 
    replace({ 
     pathname: '/login', 
     state: { nextPathname: nextState.location.pathname } 
    }) 
    } 
} 

    render((
     <Router history={browserHistory}> 
      <Route path="/" component={App} onEnter={requireAuth} /> 
      <Route path="/login" component={Login} /> 
      <Route path="/logout" component={Logout} /> 
      <Route path="/about" component={About} /> 
      <Route path="/dashboard" component={Dashboard} /> 
     </Router> 
), document.getElementById('example')); 

顺便说一句我删除了您的路线我不认为他们在您的设置中必要的嵌套，但如果你重新进行添加 我看到了你的提琴这个和平的代码，所以实际上你需要的唯一的事情做的是的OnEnter = requireAuth上的应用程序， 如果您没有登录，您将去登录，如果你是，你会去你的应用程序，

所以在我们的渲染，你可以做任何ü要

const App = React.createClass({ 
    render() { 
    return (
     <div> You are logged in </div> 
    ) 
    } 
}); 

旁注：U在这里所做的唯一事情就是通过你的状态对象的子组件

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

含义：

内登录，this.props.data <财产 - 现在有，因为这相同的价值观登录的父组件中的.state