在 React 中渲染列表时，如何有条件地为一些元素渲染包装器 div

Question

我有一个状态，它是一个对象数组。我想在渲染列表时为每两个元素放置一个包装器。该数组是一个固定的 4 元素数组，所以目前我是这样渲染的。但我想知道是否有更好的方法。

{top4Tickers.length > 0 && (
  <>
    <div className={`wrapper`}>
      <TickerCard className={`xl:pr-4`} ticker={top4Tickers[0]} />
      <TickerCard className={`xl:pl-4`} ticker={top4Tickers[1]} />
    </div>
    <div className={`wrapper`}>
      <TickerCard className={`xl:pr-4`} ticker={top4Tickers[2]} />
      <TickerCard className={`xl:pl-4`} ticker={top4Tickers[3]} />
    </div>
  </>
)}