时间戳

首页 > 解决方案 > 在循环之间引入一个div来添加flex

javascript - 在循环之间引入一个div来添加flex

问题描述

这是我目前拥有的，显示效果很好。
我最终得到 4 行和 4 列。

<div>
{(
    <Table
    data={{
        body: Object.keys(conduitData).map((key) => {
        const conduitArray = conduitData[key];
        return conduitArray.map(category => ({
            content:
            <div>
                <ConduitSelector
                data={{title: category.name}}
                />
            </div>
        }));
        }),
    }}
    />
)}
</div>

但是 CSS 不会换行，内容会一直挤在同一行中。
如果连续有 3 个以上的项目，我希望它向下弯曲。

我希望能够将每一行包装到另一个 div 中，以便我可以引入 flex css 属性，如下所示：

管道数据是一个地图。
导管阵列是一个数组。

<div>
{(
    <Table
    data={{
        body: Object.keys(conduitData).map((key) => {
        const conduitArray = conduitData[key];
        
        // (parent) I want to add this div to introduce css flex 
        return <div style={{display: 'flex'}}>
            {conduitArray.map(category => ({
            content:
            // adding flex properties here too
            <div style={{flex: '0 0 33.333333%'}}>
                <ConduitSelector
                data={{title: category.name,}}
                />
            </div>,
        }))}
        </div>
        }),
    }}
    />
)}
</div>

但是当我运行它时，我最终会出现以下错误。

错误！row.map 不是函数

有没有办法克服这个错误？

标签： javascriptcssreactjs

解决方案

我不明白为什么你不能把样式放在你的桌子周围。

<div style="display: flex; flex-wrap: wrap;">
  <conduit div style="flex-basis: 33.333333%">
  </div>
</div>

编辑

也许环绕返回函数？

return <div>{ conduitArray.map(category => ({
          content:
          <div>
              <ConduitSelector
              data={{title: category.name}}
              />
          </div>
  })) }</div>;

推荐阅读