在每个'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>
  );
}

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

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

Answer 1

您可以迭代您的数组并添加<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>
  );
}