Question

我有一个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的索引作为prop传递，然后将clearfix类应用于Item，如果索引是3的倍数，但这感觉有点hackish to me，我希望单独的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>
  );
}

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

1 个答案: