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

Question

所以我有一个由.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>)}
        
</>
);
})}

Answer 1

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

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

当然缺少必要的属性，但您可以看到逻辑。我喜欢使用Ternary Operator 的条件渲染。从文档中阅读：

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

通过这种方式，您也不需要 React.Fragement <></>，因为您只有一个元素。

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数组来自props或state，你可以使用array rest解构来获取视频数组：

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