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中检索到的更多flex-item和items。我的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

如果我正确理解了您的问题，由于this.item.map中的过滤器框，它会“破坏”您的Flexbox代码

在您的商品中，如何区分应该是过滤器的商品和应该是弹性商品的商品？您能在这里举一个视觉例子来说明您要达到的目标吗？

Answer 2

由于您指出问题是由事实引起的，因此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节点。

Flexbox从项目数组扩展项目的全宽

2 个答案: