React.js：添加值的組件

Question

剛開始學習React.js，我試圖構建一個可重置的頭部，它可以處於兩種狀態;用戶登錄||在用戶登錄不

// Header.js 
var Header = React.createClass({ 

    renderLoggedIn: function() { 
     return (
      <div>  
       <a href="index.html">Main</a> 
       <a href="user.html">User profile</a> 
       <hr/> 
      </div> 
     ); 
    }, 
    renderNormal: function() { 
     return (
      <div>  
       <a href="index.html">Main</a> 
       <a href="login.html">Login</a> 
       <hr/> 
      </div> 
     ); 
    }, 
    render: function() { 

     if (this.props.type == "normal") { 
      return this.renderNormal(); 
     } 
     else { 
      return this.renderLoggedIn(); 
     } 
    } 
}); 

React.render(<Header type="normal" />, document.getElementById('header')) 

在主HTML文件（index.html的），我想補充與頭：

// Index.html 
<header id="header"></header> 
<script src="src/header.js" type="text/jsx"></script> 

我還有一個文件名爲functions.js，其中isUserLoggedIn（ ）功能存在。該函數的返回值決定用戶是否登錄，這應該反映在標題中。

// functions.js 
function isUserLoggedIn() { 
    return // true or false; 
} 

我在哪裏放這個邏輯？我可以/應該從React模板文件中調用isUserLoggedIn（）函數嗎？如果是這樣，怎麼樣？

Answer 1

要回答你的問題，登錄狀態可以作爲屬性傳遞。

// Header.js 
var Header = React.createClass({  

    renderLoggedIn: function() { 
     return (
      <div>  
       <a href="index.html">Main</a> 
       <a href="user.html">User profile</a> 
       <hr/> 
      </div> 
     ); 
    }, 
    renderNormal: function() { 
     return (
      <div>  
       <a href="index.html">Main</a> 
       <a href="login.html">Login</a> 
       <hr/> 
      </div> 
     ); 
    }, 
    render: function() { 

     if (this.props.isLoggedIn) { 
      return this.renderNormal(); 
     } 
     else { 
      return this.renderLoggedIn(); 
     } 
    } 
}); 


React.render(<Header isLoggedIn ={isUserLoggedIn()}/>, document.getElementById('header')) 

屬性是不可變的，所以總是傳遞下去。 考慮將Flux/Reflux用於更復雜的實現。