Grundsätzlich habe ich eine Reaktionskomponente, deren render()
Funktionskörper wie folgt ist: (Es ist meine ideale, was bedeutet, dass es derzeit nicht funktioniert)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
if (this.props.hasImage) <MyImage />
else <OtherElement/>
</div>
)
}
Antworten:
Nicht genau so, aber es gibt Problemumgehungen. In den Dokumenten von React gibt es einen Abschnitt zum bedingten Rendern, den Sie sich ansehen sollten. Hier ist ein Beispiel dafür, was Sie mit Inline-if-else tun können.
render() { const isLoggedIn = this.state.isLoggedIn; return ( <div> {isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} /> ) : ( <LoginButton onClick={this.handleLoginClick} /> )} </div> ); }
Sie können sich auch innerhalb der Renderfunktion damit befassen, bevor Sie den jsx zurückgeben.
if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; } return ( <div> <Greeting isLoggedIn={isLoggedIn} /> {button} </div> );
Erwähnenswert ist auch, was ZekeDroid in den Kommentaren angesprochen hat. Wenn Sie nur nach einer Bedingung suchen und keinen bestimmten Code rendern möchten, der nicht den Anforderungen entspricht, können Sie die verwenden
&& operator
.return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> );
quelle
isTrue ? <div>Something</div> : null
Sie so etwas tun, können Sie es einfach tunisTrue && <div>Something</div>
Es gibt tatsächlich eine Möglichkeit, genau das zu tun, was OP verlangt. Rendern Sie einfach eine anonyme Funktion wie folgt und rufen Sie sie auf:
render () { return ( <div> {(() => { if (someCase) { return ( <div>someCase</div> ) } else if (otherCase) { return ( <div>otherCase</div> ) } else { return ( <div>catch all</div> ) } })()} </div> ) }
quelle
Sie können alles mit der Render -
conditional
Anweisung wieif
,else
:render() { const price = this.state.price; let comp; if (price) { comp = <h1>Block for getting started with {this.state.price}</h1> } else { comp = <h1>Block for getting started.</h1> } return ( <div> <div className="gettingStart"> {comp} </div> </div> ); }
quelle
Sie sollten sich an den TERNARY-Operator erinnern
Ihr Code wird also so sein,
render(){ return ( <div> <Element1/> <Element2/> // note: code does not work here { this.props.hasImage ? // if has image <MyImage /> // return My image tag : <OtherElement/> // otherwise return other element } </div> ) }
quelle
Wenn eine Bedingung Elemente anzeigen soll, können Sie Folgendes verwenden.
renderButton() { if (this.state.loading) { return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />; } return ( <Button onPress={this.onButtonPress.bind(this)}> Log In </Button> ); }
Rufen Sie dann die Hilfsmethode in der Renderfunktion auf.
<View style={styles.buttonStyle}> {this.renderButton()} </View>
Oder Sie können eine andere Art der Bedingung innerhalb der Rücksendung verwenden.
{this.props.hasImage ? <element1> : <element2>}
quelle
Die Abkürzung für eine if else-Struktur funktioniert in JSX wie erwartet
this.props.hasImage ? <MyImage /> : <SomeotherElement>
Sie können andere Optionen auf diesem Blogpost von DevNacho finden , aber es ist üblicher, dies mit der Kurzschrift zu tun. Wenn Sie eine größere if-Klausel benötigen, sollten Sie eine Funktion schreiben, die zurückgibt, oder Komponente A oder Komponente B.
zum Beispiel:
this.setState({overlayHovered: true}); renderComponentByState({overlayHovered}){ if(overlayHovered) { return <overlayHoveredComponent /> }else{ return <overlayNotHoveredComponent /> } }
Sie können Ihr OverlayHovered aus this.state zerstören, wenn Sie es als Parameter angeben. Führen Sie dann diese Funktion in Ihrer render () -Methode aus:
renderComponentByState(this.state)
quelle
Wenn Sie mehr als eine Bedingung benötigen, können Sie dies ausprobieren
https://www.npmjs.com/package/react-if-elseif-else-render
import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render'; class Example extends Component { render() { var i = 3; // it will render '<p>Else</p>' return ( <If condition={i == 1}> <Then> <p>Then: 1</p> </Then> <ElseIf condition={i == 2}> <p>ElseIf: 2</p> </ElseIf> <Else> <p>Else</p> </Else> </If> ); } }
quelle
Typ 1:
If
Anweisungsstil{props.hasImage && <MyImage /> }
Typ 2:
If else
Anweisungsstil{props.hasImage ? <MyImage /> : <OtherElement/> }
quelle
Vielleicht bin ich hier zu spät. Aber ich hoffe das würde jemandem helfen. Trennen Sie zuerst diese beiden Elemente.
Anschließend können Sie diese Funktionen mit der if else-Anweisung über die Renderfunktion aufrufen.
render(){ if(this.state.result){ return this.renderResult(); }else{ return this.renderQuiz(); }}
Das funktioniert bei mir. :) :)
quelle
quelle
Sie können den bedingten (ternären) Operator auch innerhalb des bedingten Operators verwenden, falls Sie zwei verschiedene Abhängigkeiten haben.
{ (launch_success) ? <span className="bg-green-100"> Success </span> : (upcoming) ? <span className="bg-teal-100"> Upcoming </span> : <span className="bg-red-100"> Failed </span> }
quelle
Versuchen Sie es mit dem Switch-Gehäuse oder dem ternären Operator
render(){ return ( <div> <Element1/> <Element2/> // updated code works here {(() => { switch (this.props.hasImage) { case (this.props.hasImage): return <MyImage />; default: return ( <OtherElement/>; ); } })()} </div> ) }
Das hat bei mir funktioniert und sollte auch bei Ihnen funktionieren. Versuchen Sie es mit Ternary Operator
quelle