响应列表组件响应使用行

Question

export default (props, index) => {
    const listing = props.listing
    return(
        <div className={4 % index === 0 && 'row'}>
            <div className="col-md-4">
                <h4>{listing.name}</h4>
            </div>
        </div>
    )
}

如何将行添加到连续4个项目组中？以上是一个列表项组件。

Answer 1

我只是在这里猜测，因为你的问题不太清楚。

我猜您有一系列列表，每行需要 4 个列表。

这可能是这样的：

const listingRows = listings.slice(0, 4).map(listing => 
  `<div className='col-md-4'>{listing.name}</div>`
)
return (
  <div class='row'>
  {listingRows}
  </div>
)

这将连续获得listing数组的前四个元素。

如果您能更好地解释，我们也许能够更好地帮助您