Bedingte interne Karte JSX

Question

Ich möchte ein bedingtes Rendering in einer Map erstellen. Die Daten werden aus einer JSON-Datei mit dieser Struktur wurde: Export const Produkte = [

[  
     { 
      "scores": { 
       "quality": 8, 
       "relevancy": { 
        "design": 3, 
        "code": 9, 
        "business": 5 
       } 
      }, 
      "title": "AdCall: Bringing WebRTC to display ads", 
      "subtitle": "The first advertising banner with video calls", 
      "content": [ 
       { 
        "type": "text", 
        "body": "AdCall is a concept for a new kind of online advertising banner. Using WebRTC, it allows for a click to call action with the aim of increasing conversions. It's built with a Node backend and deployed on Heroku." 
       } 
      ] 
     } 
    ] 

So habe ich eine Karte durch das Feld und dann möchte ich den Inhalt Abschnitt machen je nachdem, was ist der Typ. Früher habe ich eine doppelte Karte für dieses und ich brauche eine bedingte in der zweiten Karte, aber es funktioniert nicht:

return(
      <div className="LongWork"> 
       { products.map((product, i) => { 
        <div className="product-wrapper" key={i}> 
         <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div> 
         <div className="title">{product.title}</div> 
         {product.content.map((content, l) => { 
          <div className="product-content" key={l}> 
           {if(content.type==="text"){ 
            return (
             <div className="productText"> 
              {content.body} 
             </div> 
            )} 
           }} 
          </div> 

         })} 
        </div> 
       })} 

Answer 1

Verwenden Sie ternary operator für bedingtes Rendering, if-else können wir nicht innerhalb JSX verwenden.

Ein weiteres Problem ist, dass Sie nichts innerhalb map Körper zurückgeben, also verwenden Sie return auch, um die Elemente zurückzugeben.

Warum können wir nicht if-else in JSX verwenden?

Überprüfen Sie die DOC dafür.

schreiben es so:

<div className="LongWork"> 
    {products.map((product, i) => { 
     return (
      <div className="product-wrapper" key={i}> 
       <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div> 
       <div className="title">{product.title}</div> 
       {product.content.map((content, l) => { 
        return(
         <div className="product-content" key={l}> 
          {content.type === "text" ? 
           <div className="productText"> 
            {content.body} 
           </div> 
          : null} 
         </div> 
        ) 
       })} 
      </div> 
     ) 
    })} 
</div> 

Update:

Verwenden dangerouslySetInnerHTML HTML-Strings zu machen.

prüfen diese Schnipsel:

let str = "<div>Hello Ocram</div>" 
 

 
let App =() => { 
 
    return(
 
     <div> 
 
      <div dangerouslySetInnerHTML={{ __html: str }}></div> 
 
     </div> 
 
    ) 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

Answer 2

Änderung Codekartenfunktion:

return(
       <div className="LongWork"> 
        { products.map((product, i) => { 
         return <div className="product-wrapper" key={i}> 
          <div className="subtitle"><span className="subtitle-span">{product.subtitle}</span></div> 
          <div className="title">{product.title}</div> 
          {product.content.map((content, l) => { 
           return <div className="product-content" key={l}> 
            if(content.type==="text"){ 
             return (
              <div className="productText"> 
               {content.body} 
              </div> 
             )} 
            }} 
           </div> 

          })} 
         </div> 
        })} 

Wie entfernen Sie die geschweifte Klammer vor if-Anweisung in der obigen Datei

Ich hoffe, es hilft vielleicht.

Glückliche Codierung !!