当您运行代码片段时,我有一段代码执行它应该执行的操作。我希望 filterbox
占据整个宽度,而 flex-item
占据三分之一。
.view-content {
display: flex;
flex-wrap: wrap;
}
.filterbox {
width: 100%;
}
.flex-item {
width: 33%;
}
<div class="view-content">
<div class="filterbox">FILTER</div>
<div class="flex-item">
Flex-ITEM
</div>
<div class="flex-item">
Flex-ITEM
</div>
<div class="flex-item">
Flex-ITEM
</div>
<div class="flex-item">
Flex-ITEM
</div>
</div>
现在,我想继续添加更多的 filterbox
和从数组 items
中检索的 flex-item
。我的 React 代码如下所示:
render() {
return (
<div className='view-content'>
{this.items.map((item, index) => {
return (
<div key={index} className='my-container'>
<div className='filterbox'>
<div>{item.filter}</div>
</div>
<div className='flex-item'}>
<div>{item.flex-item}</div>
</div>
</div>
)
})}
</div>
);
}
我不得不将 filterbox
和 flex-item
包装在 my-container
中,它破坏了 flexbox 代码。
我该如何解决这个问题?
最佳答案
既然你指出问题是由 React 只需要返回一个元素这一事实引起的,也许你可以将这些元素包装在 <React.Fragment>
中。而不是一个分区。请注意,它需要 React v16.2 或更高版本。这样您的代码将如下所示:
render() {
return (
<div className='view-content'>
{this.items.map((item, index) => {
return (
<React.Fragment key={index}>
<div className='filterbox'>
<div>{item.filter}</div>
</div>
<div className='flex-item'}>
<div>{item.flex-item}</div>
</div>
</React.Fragment>
)
})}
</div>
);
}
这样它就满足了在 JSX 中只返回一个元素的要求,并且在最终的标记中,片段不会作为实际的 DOM 节点添加。
关于javascript - Flexbox 从元素数组中展开全宽元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54274016/