循环在返回语句内还是在功能组件的返回语句外?

Question

有两种方式可以呈现动态jsx元素

可以是循环语句或条件语句。

的例子一种方法是:

function DisplayCollections() {
return <>
{collections.map((collection, index) => {
return (
<option value={collection.id} key={index}>
{collection.name}
</option>
)};
</>
}

另一种方法:

function DisplayCollections() {
const collections = collections.map((collection, index) => {
return (
<option value={collection.id} key={index}>
{collection.name}
</option>
);
});
return {collections}
}

当然，这些例子是基本的。但是我希望你明白这个问题是从哪里来的。

做某事的最好方法是什么?或者什么时候用一个除以另一个?

Answer 1

function DisplayCollections() {
return <>
{collections.map((collection, index) =>(
<option value={collection.id} key={index}>
{collection.name}
</option>
)
</>
}

这是最好的使用方式!