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

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>
    )
}

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>
  );

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>
  )
}

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>
    );
  }

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>
    )
}

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>}

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)

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>
    );
  }
}

Typ 1: If Anweisungsstil

{props.hasImage &&

  <MyImage />

}

Typ 2: If else Anweisungsstil

   {props.hasImage ?

      <MyImage /> :

      <OtherElement/>

    }

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

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

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

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>
}

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