JSX多行html塊沒有工作

Question

爲什麼在map中它不能有多塊html？

{item.educations.map(item => 
    <p>Qualification: {item.title}</p> 
    <p>Description: {item.description}</p> 
)} 

這個工作

{item.educations.map(item => 
    <p>Qualification: {item.title}</p> 
)} 

這是我對象的數組：

"educations": [{ 
     "title": "Diploma", 
     "description": "Design" 
    }, 
{ 
     "title": "Degree", 
     "description": "Programming" 
    }] 

Answer 1

我們不能return多個html元素，所以如果你想return多元素，將它們包裝在div或其他任何元素中，它都可以工作，試試這個：

{item.educations.map(item =>{ 
    return( 
     <div> 
      <p>Qualification: {item.title}</p> 
      <p>Description: {item.description}</p> 
     </div> 
    )} 
)} 

，或者你可以這樣也寫：

{item.educations.map(item => 
    <p>Qualification: {item.title} <br/> Description: {item.description}</p> 
)} 

From Doc：

目前，在組件的渲染，你可以只返回一個節點;如果 您有，例如要返回的div列表，您必須將您的組件 包裝在div，span或任何其他組件中。

不要忘記，JSX編譯成普通的JS;