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