在每个'X'反应组件后插入一个元素

Question

我有一个React组件，使用Bootstrap的col col-md-4样式将项目列表呈现为三列。 但是，我需要在每第三个元素后插入一个clearfix div ，以确保元素的下一个“行”显示在正确的位置。

我当前的渲染代码如下所示：

render() {
  var resultsRender = $.map(this.state.searchResults, function (item) {
    return <Item Name={ item.Name } Attributes={ item.Attributes } />;
  }

  return (
    <div>{ resultsRender }</div>
  );
}

Item简单地使用col类呈现div，其中包含传入的内容：

render() {
  return(
    <div className='col col-md-4'>
      ...content here...
    </div>
  );
}

我目前的解决方法是将Item的索引作为prop传递，然后将该clearfix类应用于Item如果索引是3的倍数，但这对我来说感觉有点hackish而我更喜欢单独的div允许我只在所需的视口大小上显示clearfix（使用Bootstrap的visible-*类）。

我确信必须有一种更优雅的方式来解决这个问题，而不是我想出的那个。 任何建议表示赞赏。

Answer 1

您可以迭代您的数组并每3个项添加一个<div/> ：

render() {
  var items = $.map(this.state.searchResults, function (item) {
    return <Item Name={ item.Name } Attributes={ item.Attributes } />;
  }

  var resultsRender = [];
  for (var i = 0; i < items.length; i++) {
    resultsRender.push(items[i]);
    if (i % 3 === 2) {
      resultsRender.push(<div className="clearfix" />);
    }
  }

  return (
    <div>{ resultsRender }</div>
  );
}