javascript - 如何使具有 map 功能的 3 列网格使用react

Question

我有一些卡片，我想让它看起来像这样

[] [] []
[] [] []
[] [] []
...
...

我在使用 map 功能渲染项目时遇到问题。我已经尝试过了，但没有用。对于每个索引，如果索引可以被 3 整除，我想创建新行。我该怎么做？

                {products.map((val, index) => (
                    { index%3 == 0 ? <div className="row mx-auto"> : null}
                    <Card>
                      {val.description}
                    </Card>
                    { index%3 == 0 ? </div> : null}
                ))}

如有任何帮助，我们将不胜感激。

Answer 1

问题

您不能像这样有条件地呈现打开/关闭标签。

解决方案

将数组分块成数组数组，映射行，然后映射列。

分块函数示例:

const arrayChunk = (arr, n) => {
  const array = arr.slice();
  const chunks = [];
  while (array.length) chunks.push(array.splice(0, n));
  return chunks;
};

示例映射:

{arrayChunk(products, 3).map((row, i) => (
  <div key={i} className="row mx-auto">
    {row.map((col, i) => (
      <span key={i}>[{col}]</span>
    ))}
  </div>
))}

const arrayChunk = (arr, n) => {
  const array = arr.slice();
  const chunks = [];
  while (array.length) chunks.push(array.splice(0, n));
  return chunks;
};

function App() {
  return (
    <div className="App">
      {arrayChunk([...Array(9).keys()], 3).map((row, i) => (
        <div key={i} className="row mx-auto">
          {row.map((col, i) => (
            <span key={i}>[{col}]</span>
          ))}
        </div>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>