Question

我试图在遍历数据时在React中为网格系统添加一个断点。它没有表现出我想要的方式。我想要3个col-lg-3，然后在继续相同模式之前用<div class="w-100"></div>添加一个断点。

我认为通过在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应该在下一行。

降价显示了div和col-lg-3的{{1}}包装器。这可能引起问题吗？如果是这样，我将如何更改？

Answer 1

最简单的解决方法是使用片段https://reactjs.org/docs/fragments.html 如果您使用的是React 16。例如，不要忘记导入它 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>
   )
  });
};

在React中遍历数据时如何在网格系统上添加断点

1 个答案: