Ist es möglich, die Anweisung if… else… in der Renderfunktion React zu verwenden?

94

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>
    )
}
Xin
quelle
Ja, das ist ein sehr häufiges Problem und eine großartige Frage! Vielleicht hilft es, das Problem genau zu klären, wenn Sie es etwas anders formulieren und zeigen, was passiert, wenn Sie diesen bestimmten Code ausführen (überlegen Sie auch, ihn ein wenig zu formatieren).
ZekeDroid
Ja, es ist falsch (ideal). Ich habe gerade die Frage aktualisiert, um das Problem zu beheben. Vielen Dank
Xin
1
zu schlecht kann nicht schreiben, wenn ... sonst in render
vijay

Antworten:

179

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>
  );
Alexandre Angelim
quelle
14
Ein geschickter Trick ist auch die Verwendung der Kurzschlussfunktion von JS! Um zu vermeiden, dass isTrue ? <div>Something</div> : nullSie so etwas tun, können Sie es einfach tunisTrue && <div>Something</div>
ZekeDroid
1
Darüber hinaus können Sie den folgenden Artikel lesen, um mehr über bedingte Renderings in React zu erfahren, abgesehen von if else.
Robin Wieruch
Ich möchte Bedingungen in der Schleife wie "data.map (item => (<tr> <td> if (item.type == 'image') {<image src =" {image.src} ">} else behandeln {{item}} </ td> </ tr>)) "so etwas
Vikas Chauhan
51

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>
  )
}
Manncito
quelle
5

Sie können alles mit der Render - conditionalAnweisung wie if, 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>
    );
  }
Shubham Verma
quelle
5

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>
    )
}
Mohideen bin Mohammed
quelle
4

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>}
Buwaneka Sudheera
quelle
2

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)

Kevin
quelle
2

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>
    );
  }
}
Kushal Jain
quelle
2

Typ 1: If Anweisungsstil

{props.hasImage &&

  <MyImage />

}


Typ 2: If else Anweisungsstil

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }
Yuvraj Patil
quelle
1

Vielleicht bin ich hier zu spät. Aber ich hoffe das würde jemandem helfen. Trennen Sie zuerst diese beiden Elemente.

renderLogout(){
<div>
   <LogoutButton onClick={this.handleLogoutClick} />
<div>
}

renderLogin(){
<div>
   <LoginButton onClick={this.handleLoginClick} />
<div>
}

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. :) :)

Choxmi
quelle
1

Ich habe einen ternären Operator verwendet und es funktioniert gut für mich.

> {item.lotNum == null ? ('PDF'):(item.lotNum)}

Vinod Kumar
quelle
1

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>
}
Hasan Sefa Ozalp
quelle
0

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

Champion-Läufer
quelle