在ReactJS中顯示基於身份驗證狀態的元素

Question

我試圖僅在用戶登錄時顯示'edit-btn'。在ReactJS中實現此目的的最佳方法是什麼？通過在沒有登錄的情況下渲染沒有元素的組件並在用戶登錄時渲染元素？如果是這樣，那麼實現這一目標的最佳方法是什麼？我對ReactJS頗爲陌生。

class LeftBlock extends React.Component { 

    render() { 
    return (
     <div className="left-block"> 
     {this.props.children} 
     <a href="#" className="edit-btn"><i className="fa fa-pencil"></i></a> 
     <br className="clear" /> 
     </div> 
    ); 
    } 

} 

Answer 1

即使條件爲空，也可以有條件地呈現組件。

class LeftBlock extends React.Component { 

    render() { 

     var isAuth = false; // You'll need to figure out a way how to get this - From a store maybe or cookie? 
     var button; 
     if (isAuth){ 
      button = (<a href="#" className="edit-btn"><i className="fa fa-pencil"></i></a>); 
     } 

     return (
      <div className="left-block"> 
      {this.props.children} 
      {button} 
      <br className="clear" /> 
      </div> 
     ); 
    } 
} 

因此，在這種情況下，如果isAuth爲false，則不會呈現任何{button}。

在獲取isAuth狀態方面，我建議您擁有一個AuthenticationStore，然後您可以從組件內獲取身份驗證信息。

如果您還不熟悉Flux體系結構，請查看Flux體系結構。 https://facebook.github.io/flux/docs/overview.html

更新

小提琴：https://jsfiddle.net/6yq1ctcp/1/