Flexbox 从项目数组中扩展一个项目的全宽答案

【问题标题】：Flexbox expand full width an item from array of itemsFlexbox 从项目数组中扩展一个项目的全宽
【发布时间】：2019-01-20 06:01:37
【问题描述】：

当你运行代码 sn-p 时，我有一段代码在做它应该做的事情。我希望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>

现在，我想继续添加更多从数组 items 检索到的 filterbox 和 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 代码。我该如何解决这个问题？

【问题讨论】：

它破坏了你的 flexbox 代码是什么意思？添加项目时，您希望项目垂直显示吗？
filterbox 和 flex-item 的父容器必须像 .view-content 一样使用 display:flex 才能使 flexbox 工作。我不得不将它们包装在 my-container 中，因为 React JSX 只允许返回 1 个元素。

标签： javascript html css reactjs flexbox

【解决方案1】：

由于您指出问题是由 React 只需要返回一个元素这一事实引起的，也许您可以将这些元素包装在 <React.Fragment> 而不是 div 中。请注意，它需要 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 节点。

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，它会因为 this.item.map 中的过滤器框而“破坏”您的弹性框代码

在你的 item 中，你如何区分应该是 filterbox 的 item 和应该是 flex-item 的 item ？你能在这里放一个你试图实现的视觉例子吗？

【讨论】：