我有一个 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>
  );
}

我目前的解决方法是将Itemin的索引作为props传递，然后将 clearfix 类应用于Item索引是 3 的倍数，但这对我来说感觉有点hackish，我更喜欢单独div的让我仅显示所需视口大小的清除修复（使用 Bootstrap 的visible-*类）。

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