javascript - Inserting an element after every 'X' React components - Stack Overflow

admin管理员组

文章数量:1352192

I have a React ponent that renders a list of items into three columns using Bootstrap's col col-md-4 styles. However, I need to insert a clearfix div after every third element to ensure that the next 'row' of elements displays in the correct place.

My current render code looks like this:

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

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

Item simply renders a div with the col classes, containing the passed-in content:

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

My current workaround is to pass the index of the Item in as a prop, and then apply the clearfix class to the Item if the index is a multiple of 3, but this feels a bit hackish to me and I would prefer a separate div to allow me to only show the clearfix on the required viewport size (using Bootstrap's visible-* classes).

I'm sure there must be a more elegant way to solve this problem than the one I've e up with. Any suggestions are appreciated.

I have a React ponent that renders a list of items into three columns using Bootstrap's col col-md-4 styles. However, I need to insert a clearfix div after every third element to ensure that the next 'row' of elements displays in the correct place.

My current render code looks like this:

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

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

Item simply renders a div with the col classes, containing the passed-in content:

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

My current workaround is to pass the index of the Item in as a prop, and then apply the clearfix class to the Item if the index is a multiple of 3, but this feels a bit hackish to me and I would prefer a separate div to allow me to only show the clearfix on the required viewport size (using Bootstrap's visible-* classes).

I'm sure there must be a more elegant way to solve this problem than the one I've e up with. Any suggestions are appreciated.

• javascript
• jquery
• twitter-bootstrap
• reactjs

Share Improve this question Follow asked Apr 14, 2016 at 9:46 AdmiralFailureAdmiralFailure 14611 silver badge1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You could iterate your array and add a <div/> every 3 items:

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

本文标签： javascriptInserting an element after every 39X39 React componentsStack Overflow