有條件的內部映射JSX

Question

我想在地圖中創建條件呈現。該數據是從JSON文件，採取這種結構： 出口常量產品= [

[  
     { 
      "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." 
       } 
      ] 
     } 
    ] 

因此，我創建通過數組的地圖，然後我想呈現取決於什麼類型的內容部分。我用這雙地圖，我需要在第二個地圖條件，但它不工作：

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

使用ternary operator進行有條件渲染，if-else我們不能在JSX裏面使用。

另一個問題是，你沒有返回map內部任何東西，所以使用return也返回元素。

爲什麼我們不能在JSX中使用if-else？

檢查DOC。

寫這樣的：

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

更新：

使用dangerouslySetInnerHTML渲染HTML字符串。

檢查這個片段：HTTPS：//反應-CN

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

在地圖功能的代碼更改：

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

如前if語句刪除花括號在上面的文件

希望它可以幫助。

快樂編碼！