Javascript reagieren Komponente konditionalen Menüeintrag zeigt

Question

Ich habe eine Reaktionskomponente und ich habe 2 Links hinzugefügt.

Ein Link zeigt den Login-Link und der andere den Logout.

Ich möchte nur nicht beide auf ComponentDidMount zeigen Ich habe eine Bedingung hinzugefügt, die entweder das eine oder das andere verstecken wird. Hier

ist der Code:

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; 

Die Frage ist nicht nichts oder so versteckt wird, so ist es nicht funktioniert.

Wie kann ich das beheben, damit ich die Bedingung bekomme, das eine oder das andere zu verstecken?

Answer 1

würde ich sagen, anstatt direkt die DOM properties mit dem Reagieren Ansatz von bedingten Rendering gehen zu modifizieren wie

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; 

Answer 2

Anstatt den Stil display: none und die DOM direkt zu manipulieren, verwenden conditional rendering und machen nur ein Element auf der Grundlage des Zustandes. Verwenden Sie ternary operator Anwendungsbedingungen innerhalb JSX.

So:

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'/>

Answer 3

Sie wollen wahrscheinlich die logged Variable auf die Navigation Komponente einfach als Requisiten weitergeben müssen: <Navigation logged />. In diesem Fall könnten Sie es so schreiben:

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;