JSXマルチラインhtmlブロックが機能しませんでした

Question

なぜマップ内に複数のhtmlブロックを持つことができませんか？

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

Answer 1

我々はできませんreturn以上html 1以上の要素なので、あなたがreturnする場合は、複数の要素：

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

は、これはこれは、オブジェクトの私の配列です

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

を働きました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：

現在、コンポーネントのレンダリングでは、1つのだけのノードを返すことができます。 返すdivのリストがある場合は、divやspanなどのコンポーネント内にコンポーネント をラップする必要があります。

JSXを通常のJSにコンパイルすることを忘れないでください。