时间戳

首页 > 解决方案 > 在 React 中循环数据时如何向网格系统添加断点

javascript - 在 React 中循环数据时如何向网格系统添加断点

问题描述

我试图在循环数据时为 React 中的网格系统添加一个断点。不过，它的行为方式并不是我想要的。我想要 3 ，然后在继续使用相同的模式之前col-lg-3添加一个断点。<div class="w-100"></div>

我认为通过附加断点 if 会相当容易index === 3，但是由于我必须将其包装在另一个 div 中，因此会导致一些意想不到的结果。

const newVideoRow = category => {
  return category.map((video, index) => {
    if (index === 3) {
      return (
        <div>
          <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
            <Video
              key={video.title}
              videoTitle={video.title}
              videoLink={video.video}
              videoImage={video.image}
            />
          </div>
          <div className="w-100"/>
        </div>
      )
    }

  return (
    <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
      <Video
        key={video.title}
        videoTitle={video.title}
        videoLink={video.video}
        videoImage={video.image}
      />
    </div>
   )
  });
};

这是意外结果的图片。测试 4 应该在下一行。

意外结果的图片

markdown 显示了divthecol-lg-3和<div class="w-100"></div>. 这会导致问题吗？如果是这样，我将如何改变它？

开发工具截图

标签： javascriptreactjstwitter-bootstrap

解决方案

如果您使用的是 react 16， 最简单的解决方法是使用 Fragments https://reactjs.org/docs/fragments.html 。例如，不要忘记导入它import React, { Fragment } from 'react';

const newVideoRow = category => {
  return category.map((video, index) => {
    if (index === 3) {
      return (
        <Fragment>
          <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
            <Video
              key={video.title}
              videoTitle={video.title}
              videoLink={video.video}
              videoImage={video.image}
            />
          </div>
          <div className="w-100"/>
        </Fragment>
      )
    }

  return (
    <div className="video col-sm-12 col-md-6 col-lg-3" key={video.title}>
      <Video
        key={video.title}
        videoTitle={video.title}
        videoLink={video.video}
        videoImage={video.image}
      />
    </div>
   )
  });
};

推荐阅读