Question

如何使用具有以下格式的javascript实现网格/卡布局：

<div class='x'>
  <div class='y'></div>
  <div class='y'></div>
  <div class='y'></div>
</div>
<div class='x'>
  <div class='y'></div>
  <div class='y'></div>
  <div class='y'></div>
</div>

通过在 FileList 组件中映射数组来检索列容器的项目：

data.files.map(file => (
  <FileItem
    key={file.id}
    file={file}
    refresh={() => refetch()}
  />
))

我可以传入 FileItem 组件中的<div class='y'>。我只是不知道如何实现行容器的逻辑。

基本上我想要这个：

<div class='x'>
  <div class='y'>FileItem 1</div>
  <div class='y'>FileItem 2</div>
  <div class='y'>FileItem 3</div>
</div>
<div class='x'>
  <div class='y'>FileItem 4</div>
  <div class='y'>FileItem 5</div>
  <div class='y'>FileItem 6</div>
</div>

Answer 1

一个可能的解决方案是使用lodash库中的_chunk()来创建一个块列表，然后将每个块渲染到它自己的容器中：

render() {
    const elements = [1, 2, 3, 4, 5, 6, 7, 8];
    const chunked = _chunk(elements, 3); // [[1, 2, 3], [4, 5, 6], [7, 8]]

    return(
        {chunked.map(chunk => (
            <div className="row" key="???">
                {chunk.map(elem => (
                    <div className="col" key="???" >{elem}</div>
                ))}
            </div>
        ))}
    );
}

这将产生以下标记：

<div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
</div>
<div class="row">
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
</div>
<div class="row">
    <div class="col">7</div>
    <div class="col">8</div>
</div>

当你需要为每个行容器找到一个键时，问题已经开始了，因为react希望同一类型的兄弟拥有一个唯一的密钥。

获得相同对齐的更好方法是只有一个容器，当行满时，让元素自动浮动到下一个“行”。这可以是例如通过使用flexbox：

来实现

const numItemsPerRow = 3;

const containerStyle = { 
  display: "flex", 
  width: "600px", 
  flexWrap: "wrap" 
};

const itemStyle = {
  minWidth: `${100 / numItemsPerRow}%`,
  textAlign: "center",
  border: "1px solid black",
  boxSizing: "border-box"
};

const elements = [1, 2, 3, 4, 5, 6, 7, 8];

const Grid = () => (
  <div style={containerStyle}>
    {elements.map(elem => <div style={itemStyle}>{elem}</div>)}
  </div>
);

you can find a good tutorial on how to use flexbox here

Reactjs具有已定义列数的网格布局

1 个答案: