javascript - Flexbox 从元素数组中展开全宽元素

Question

当您运行代码片段时，我有一段代码执行它应该执行的操作。我希望 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 代码。我该如何解决这个问题？

Answer 1

既然你指出问题是由 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 节点添加。