it-swarm.com.de

ternärer Operator in Jsx, um HTML mit React aufzunehmen

Ich verwende reagieren und versuche, diese Fehlermeldung anzuzeigen, wenn this.state.message === 'failed'. Ich bin mir aber nicht sicher, warum diese dreistufige Operation nicht funktioniert. Was mache ich hier falsch?

render() {
...
<div className="row">
return (this.state.message === 'failed') ? ( => {
     <div className="alert alert-danger" role="alert">
       Something went wrong
     </div>
})() : false;
}
</div>

Im Moment wird nur return (this.state.message === 'failed') ? ( => in der HTML angezeigt

26
Modelesq

Derzeit formatiere ich meine Ternaren gerne in react:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

Sie haben zu Recht die Möglichkeit, IIFEs innerhalb einer Renderanweisung sowie ternäre Ausdrücke zu verwenden. Die Verwendung einer normalen if .. else-Anweisung ist gültig, aber die return-Anweisung der render-Funktion kann nur Ausdrücke enthalten.

55
Nathan

Die Syntax für ternary lautet condition ? if : else. Um sicher zu gehen, können Sie die gesamte ternäre Anweisung immer in Klammern einschließen. JSX-Elemente werden auch in Klammern eingeschlossen. Dem fetten Pfeil in einer Pfeilfunktion werden immer zwei Klammern vorangestellt (für die Argumente) - Sie benötigen hier jedoch keine Funktionen. Bei all dem gibt es also einige Syntaxfehler in Ihrem Code. Hier ist eine funktionierende Lösung:

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Bearbeiten: Wenn sich dieses Zeichen in einem anderen Markup befindet, müssen Sie das Rendern nicht erneut aufrufen. Sie können nur geschweifte Klammern zur Interpolation verwenden.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}
5
Matis Lepik

Sie sollten dies versuchen:

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}
2
Elod Szopos

In Anbetracht der obigen Antworten können Sie auch direkt einen ternären Ausdruck von return() in Ihrer render() zurückgeben

return condition? this.function1(): this.function2();

und innerhalb von function1 () und function2 () können Sie Ihre Ansichten zurückgeben.

1
Aayushi

Verwenden Sie wieder variable Klammern, um variable Ternäre zu verwenden

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}
1

Die akzeptierte Antwort von @Nathan und andere ähnliche Antworten sind korrekt. Es sei jedoch darauf hingewiesen, dass das Ergebnis für ? und das Ergebnis für : jeweils ein einzelnes Element sein muss oder in ein einzelnes Element eingeschlossen sein muss (oder das Ergebnis kann null | undefined sein, wobei beide als einzelnes Element qualifiziert sind). Im folgenden Beispiel funktioniert das Ergebnis für ?, das Ergebnis für : schlägt jedoch fehl ...

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)
0
Kenigmatic