2017-06-28 10 views
0

反応成分があり、2つのリンクが追加されました。Javascript反応成分条件メニュー項目表示

1つのリンクはログインリンクを表示し、もう1つはログアウトを表示します。

私はcomponentDidMountにその両方を表示したくありません。どちらか一方を非表示にする条件を追加しました。

class Navigation extends Component { 

    componentDidMount() { 

    let logged = true; 

    if (logged) { 
     document.getElementById('login').style.display = 'none'; 
    } else { 
     document.getElementById('logout').style.display = 'none'; 
    } 

    } 
    } 

    render() { 

    return (
     <div> 
     <ul> 
      <li id="login"><a href="#login">Login</a></li> 
      <li id="logout"><a href="#logout">Logout</a></li> 
     </ul> 
     </div> 
    ); 
    } 
} 

export default Navigation; 

それは働いていないので、問題は何もいずれかの方法で非表示になっていないされていません。ここで

はコードです。

どのように私はどちらか一方を隠すための条件を得ることができますこれを修正することができますか?

答えて

0

私は

class Navigation extends Component { 

    render() { 
    //Get the logged value from wherever you are getting it in the application. 
    // Eg: let logged = true 
    return (
     <div> 
     <ul> 
      {logged ? (<li id="logout"><a href="#logout">Logout</a></li>) : (<li id="login"><a href="#login">Login</a></li>) } 

     </ul> 
     </div> 
    ); 
    } 
} 

export default Navigation; 
0

のような条件付きレンダリングのリアクトアプローチで行く代わりのスタイルdisplay: noneを設定し、直接DOMを操作し、conditional renderingを使用して、上の唯一の要素をレンダリングする代わりに、直接DOM propertiesを変更すると言うでしょう条件の基礎。 ternary operatorの条件をJSXの内側に適用してください。

このよう

<Navigation logged />:あなたはおそらく、単に小道具としてNavigation部品にlogged変数を渡したい

class Navigation extends React.Component { 
 

 
    render() { 
 
     let logged = true;  //use actual value 
 
     return (
 
      <div> 
 
       <ul> 
 
        { 
 
         logged ? 
 
          <li id="logout"><a href="#logout">Logout</a></li> 
 
         : 
 
          <li id="login"><a href="#login">Login</a></li> 
 
        } 
 
       </ul> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Navigation/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

0

。その場合、次のように書くことができます。

const Navigation = ({ logged }) => { 
    <div> 
    <ul> 
     {!logged && <li id="login"><a href="#login">Login</a></li>} 
     {logged && <li id="logout"><a href="#logout">Logout</a></li>} 
    </ul> 
    </div> 
} 

export default Navigation; 
関連する問題