如何在JSX-TypeScript中将容器包装在具有条件的映射函数中

Question

所以我有一个由.map()函数迭代的对象数组，其中我想有一个条件，如果对象索引是> 1，我想用一个类将其封装在div中。

以下是我到目前为止得到的内容，但它并没有将所有视频打包在一个单独的.main-videosdiv:中

感谢

object.map((object, index) => {
return (
<>
{index === 0 && (
<div className="main-image" >
{<img>}
</div>
)}
{index > 1 && (
<div className="main-videos">
{<video>}
</div>
)}
</>
);
})}

What I basically want to do is this:

object.map((object, index) => {
return (
<>
{index === 0 && (
<div className="main-image" >
{<img>}
</div>
)}
{index === 1 && (<div className="main-videos">)}
{index > 1 && (<video>)}
{index === object.length && (</div>)}

</>
);
})}

Answer 1

我会尝试一些不同的方法，如下所示：

<div className={index === 0 ? 'main-image' : 'main-videos'}>
{ index === 0 ? <img /> : <video /> }
</div>

当然，必要的属性是缺失的，但你可以看到其中的逻辑。我喜欢使用带有三元运算符的条件渲染。阅读文档：

条件(三元(运算符是唯一一个接受三个操作数的JavaScript运算符：一个后跟问号(？(的条件，然后是一个在条件为真时要执行的表达式，然后是冒号(：(，最后是在条件为假时要执行的表达式。此运算符经常用作if语句的快捷方式。

这样，您就不需要React。易碎<></>，因为您只有一个元素。

Answer 2

您可以在循环外渲染<img />，并切片循环以在视频容器内渲染<video />：

const Example = () => {
if(!object.length) return null; // don't render anything when there aren't any items
return (
<>
<div className="main-image" >
<img />
</div>

<div className="main-videos">
{object.slice(1).map(() => (
<video />
))}
</div>
</>
)
};

如果object数组来自道具或状态，则可以使用带有数组rest的destructuring来获得视频数组：

const Example = ({ object: [img, ...videos] }) => {
if(!img) return null; // don't render anything when there aren't any items
return (
<>
<div className="main-image" >
<img />
</div>

<div className="main-videos">
{videos.map(() => (
<video />
))}
</div>
</>
)
};