在每个“X”React 组件之后插入一个元素

我有一个 React 组件，它使用 Bootstrap 将项目列表呈现为三列col col-md-4风格。但是，我需要插入一个clearfix div http://getbootstrap.com/css/#grid-responsive-resets每三个元素之后，以确保下一个“行”元素显示在正确的位置。

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

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

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

Item只需渲染一个 divcol类，包含传入的内容：

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

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

我确信一定有一种比我想出的方法更优雅的方法来解决这个问题。任何建议表示赞赏。

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

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>
  );
}