使用行响应列表组件响应答案

【问题标题】：react list component responsive using row使用行响应列表组件响应
【发布时间】：2017-06-13 16:21:05
【问题描述】：

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 个项目？上面是一个列表项组件。

【问题讨论】：

试试这个：<div className={index % 4 === 0 ? 'row' : ''}>
@MayankShukla 根本不起作用
请进一步扩展您的答案。你到底想达到什么目的？解释你想要的这个分组。
你能更好地解释你的问题吗？目前尚不清楚您要做什么

标签： javascript css reactjs

【解决方案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 数组的前四个元素。

如果你能解释得更好，我们也许能更好地帮助你

【讨论】：