Wenn Bedingung innerhalb von map() React

Question

Ich habe eine map() Funktion, die Ansichten basierend auf einer Bedingung anzeigen muss. Ich habe in der Dokumentation Reagieren sehe, wie die Bedingungen zu schreiben und dies ist, wie Sie eine Bedingung schreiben:

{if (loggedIn) ? (
    // Hello! 
) : (
    // ByeBye! 
)} 

Hier ist der Link: https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

So habe ich versucht, dieses Wissen zu nehmen und implemant es in meiner React App. Und es stellte sich so heraus:

render() { 
    return (
    <div> 
     <div className="box"> 
     {this.props.collection.ids 
      .filter(
      id => 
       // note: this is only passed when in top level of document 
       this.props.collection.documents[id][ 
       this.props.schema.foreignKey 
       ] === this.props.parentDocumentId 
     ) 
      .map(id => 
      {if (this.props.schema.collectionName.length < 0 ? (

       <Expandable> 
       <ObjectDisplay 
        key={id} 
        parentDocumentId={id} 
        schema={schema[this.props.schema.collectionName]} 
        value={this.props.collection.documents[id]} 
       /> 
       </Expandable> 

      ) : (
       <h1>hejsan</h1> 
      )} 
     )} 
     </div> 
    </div> 
) 
} 

Aber es funktioniert nicht ..! Hier ist der Fehler:

ich alle Hilfe schätzen die ich bekommen kann!

Answer 1

Sie verwenden beide ternary operator und if Zustand, verwenden Sie einen.

von ternären Operator:

.map(id => { 
    return this.props.schema.collectionName.length < 0 ? 
     <Expandable> 
      <ObjectDisplay 
       key={id} 
       parentDocumentId={id} 
       schema={schema[this.props.schema.collectionName]} 
       value={this.props.collection.documents[id]} 
      /> 
     </Expandable> 
    : 
     <h1>hejsan</h1> 
} 

Durch wenn Bedingung:

.map(id => { 
    if(this.props.schema.collectionName.length < 0) 
     return <Expandable> 
        <ObjectDisplay 
         key={id} 
         parentDocumentId={id} 
         schema={schema[this.props.schema.collectionName]} 
         value={this.props.collection.documents[id]} 
        /> 
       </Expandable> 
    return <h1>hejsan</h1> 
} 

Answer 2

Entfernen Sie das Schlüsselwort if. Es sollte nur predicate ? true_result : false_result sein.

Auch ? : heißt ternärer Operator.

Answer 3

Es gibt zwei Syntaxfehler in Ihrem dreifach konditionalen:

1. das Stichwort entfernen if. Überprüfen Sie die korrekte Syntax here.

2. Ihnen fehlt eine Klammer in Ihrem Code. Wenn Sie es wie folgt formatiert:

   {(this.props.schema.collectionName.length < 0 ? 
       (<Expandable></Expandable>) 
       : (<h1>hejsan</h1>) 
   )} 
   

Hope this funktioniert!

Answer 4

Sie mischen if-Anweisung mit einem ternären Ausdruck, deshalb haben Sie einen Syntaxfehler. Es könnte einfacher sein, für Sie zu verstehen, was los ist, wenn Sie Mapping-Funktion außerhalb Ihres Render-Methode extrahieren:

renderItem = (id) => { 
    // just standard if statement 
    if (this.props.schema.collectionName.length < 0) { 
     return (
      <Expandable> 
       <ObjectDisplay 
        key={id} 
        parentDocumentId={id} 
        schema={schema[this.props.schema.collectionName]} 
        value={this.props.collection.documents[id]} 
       /> 
      </Expandable> 
     ); 
    } 
    return (
     <h1>hejsan</h1> 
    ); 
} 

Dann ist es nur nennen, wenn Mapping:

render() { 
    return (
     <div> 
      <div className="box"> 
       { 
        this.props.collection.ids 
         .filter(
          id => 
          // note: this is only passed when in top level of document 
          this.props.collection.documents[id][ 
           this.props.schema.foreignKey 
          ] === this.props.parentDocumentId 
         ) 
         .map(this.renderItem) 
       } 
      </div> 
     </div> 
    ) 
} 

Natürlich könnten Sie haben benutzte den ternären Ausdruck auch, es ist eine Frage der Präferenz. Was Sie jedoch verwenden, wirkt sich auf die Lesbarkeit aus. Überprüfen Sie daher, ob Sie überprüfen.