在每个 'X' React 组件之后插入一个元素答案

【问题标题】：Inserting an element after every 'X' React components在每个 'X' React 组件之后插入一个元素
【发布时间】：2016-08-05 18:57:20
【问题描述】：

我有一个 React 组件，它使用 Bootstrap 的 col col-md-4 样式将项目列表呈现为三列。但是，我需要在每三个元素之后insert a 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 的索引作为道具传递，然后如果索引是3 的倍数，则将clearfix 类应用于Item，但这对我来说有点骇人听闻我更喜欢单独的 div 以允许我仅在所需的视口大小上显示 clearfix（使用 Bootstrap 的 visible-* 类）。

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap reactjs

【解决方案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>
  );
}

【讨论】：