Question

为什么我仍然会看到有些人写return和braces而你可以不用braces但是你有多行html标签？

{albums.map(o=>
  <div key={o.id} className="album-item">
    <div className="album-item-name">
      {o.name}
    </div>
  </div>
)}

像上面的代码一样，它只是工作

Answer 1

在返回前有语句时使用括号。例如，如果我映射数据并且我打算在返回之前进行一些计算，我使用大括号，但我只是缩进以返回一个块语句，就像在代码中一样，我不使用花括号。

需要大括号。

ablums.map(o => {
     const name = `app_${o.name}`
     return(  <div key={o.id} className="album-item">
     <div className="album-item-name">
         {name}
        </div>
     </div>);
});

不需要大括号

{albums.map(o=>
     <div key={o.id} className="album-item">
         <div className="album-item-name">
             {o.name}
        </div>
    </div>
)}

Answer 2

许多可能的案例之一可能是

使用花括号，您可以直接在反应组件的返回部分内编写此代码：

{albums.map(o=>
     <div key={o.id} className="album-item">
         <div className="album-item-name">
             {o.name}
        </div>
    </div>
)}

return语句的用例将在反应组件的内部渲染部分

let myDivs = albums.map(o=>
     return ( <div key={o.id} className="album-item">
         <div className="album-item-name">
             {o.name}
        </div>
    </div>
    )
)

在jsx map中返回语句

2 个答案: