javascript - JSX 多行 html block 不起作用

Question

为什么在 map 中不能有多个 html block ？

{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

我们无法返回多个html元素，因此如果您想返回多个元素，请将它们包装在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 :

Currently, in a component's render, you can only return one node; if you have, say, a list of divs to return, you must wrap your components within a div, span or any other component.

Don't forget that JSX compiles into regular JS;