时间戳

首页 > 解决方案 > 如何在 JSX 中使用条件将容器包装在地图函数中 - TypeScript

javascript - 如何在 JSX 中使用条件将容器包装在地图函数中 - TypeScript

问题描述

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

到目前为止，这是我所得到的，但它并没有将所有视频都包含在一个单曲中.main-videos div：

谢谢

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>)}
        
</>
);
})}

标签： javascriptreactjstypescriptdictionaryjsx

解决方案

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

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

当然缺少必要的属性，但您可以看到逻辑。我喜欢将条件渲染与三元运算符一起使用。从文档中阅读：

条件（三元）运算符是唯一接受三个操作数的 JavaScript 运算符：条件后跟问号 (?)，如果条件为真则执行表达式，后跟冒号 (:)，最后是表达式如果条件不成立则执行。此运算符经常用作 if 语句的快捷方式。

这样你就不需要React.Fragement <></>因为你只有一个元素。

推荐阅读