如何在 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>

當然缺少必要的屬性，但您可以看到邏輯。 我喜歡將條件渲染與三元運算符一起使用。 從文檔中閱讀：

條件（三元）運算符是唯一采用三個操作數的 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，則可以使用帶有數組 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>
    </>
  )
};