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 и 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

Поскольку вы указываете, что проблема вызвана тем фактом, что 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.

Answer 2

Если я правильно понял вашу проблему, она «ломает» ваш код flexbox из-за filterbox в this.item.map

В вашем предмете, как вы различаете предмет, который должен быть фильтром, и предмет, который должен быть гибким? Не могли бы вы привести наглядный пример того, чего вы пытаетесь достичь?