Was sind die bedingten Operatoren, die wir in react js unter render Methode verwenden können?

Question

Ich möchte einige Logik mit Schalter oder für oder wenn Schleife durchführen. Aber ich kann nicht jemand davon in render method.right jetzt verwende ich ternary operator.Is gibt es noch andere Operatoren, auf die wir in der Render-Methode zugreifen können?

Answer 1

Inline-Funktion verwenden. Demo: https://jsfiddle.net/viviancpy/7v9th3Lj/1/

<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 




var Hello = React.createClass({ 
    render: function() { 
    return (
     <div> 
     {(() => { 
     switch (this.props.name) { 
      case "World": return (<div>Oh this is a Hello World</div>); 
      default:  return (<div>Good Morning</div>); 
     } 
     })()} 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Answer 2

Sie sollten die Beispiele auf https://facebook.github.io/react/tips/if-else-in-JSX.html überprüfen.

Eine Option besteht darin, Logik außerhalb des JSX zu verwenden und die Unterkomponenten in Variablen zu speichern, die Sie später in JSX einfügen können.

Beispiel (aus dem obigen Link):

var loginButton; 
if (loggedIn) { 
    loginButton = <LogoutButton />; 
} else { 
    loginButton = <LoginButton />; 
} 

return (
    <nav> 
    <Home /> 
    {loginButton} 
    </nav> 
);