在 React 中使用 map 函数时，如何在渲染组件的过程中添加换行符？

Question

目标：使用map function 和add a line break 为every after the 5th column component is rendered 渲染组件，依此类推，形成以下行。

问题：我不确定如何在映射功能中添加换行符。在添加换行符时，我对操作什么感到困惑。

组件的内容从data.jsx 文件中读取，该文件包含一个对象，该对象具有多个属性，这些属性具有自己的值。

外观问题：

进球出场：

使用地图功能渲染组件的源代码 (Main.jsx)：

import React from "react";
import Product from "./Product";


export default function Main(props){
  const { products, onAdd } = props;
    return (
      <main className="block col-2">
        <h2>Products</h2>
        <div className="row">
          {products.map((product) => (
            <Product key={product.id} product={product} onAdd={onAdd} />
          ))}
        </div>
      </main>
    );
}

data.jsx的源代码：

const data = {
  products: [
    {
      id: "1",
      name: "MacBook",
      price: 1400,
      image: "https://picsum.photos/id/180/2400/1600"
    },
    {
      id: "2",
      name: "Old Car",
      price: 2400,
      image: "https://picsum.photos/id/111/4400/2656"
    },
    {
      id: "3",
      name: "W Shoes",
      price: 1000,
      image: "https://picsum.photos/id/21/3008/2008"
    },

    {
      id: "4",
      name: "W Shoes 2",
      price: 1200,
      image: "https://picsum.photos/id/21/3008/2008"
    },

    {
      id: "5",
      name: "W Shoes 3",
      price: 1300,
      image: "https://picsum.photos/id/21/3008/2008"
    },

    {
      id: "6",
      name: "W Shoes 3",
      price: 1300,
      image: "https://picsum.photos/id/21/3008/2008"
    },

    {
      id: "7",
      name: "W Shoes 3",
      price: 1300,
      image: "https://picsum.photos/id/21/3008/2008"
    },

    {
      id: "8",
      name: "W Shoes 3",
      price: 1300,
      image: "https://picsum.photos/id/21/3008/2008"
    }
  ]
};
export default data;

CodeSandbox 中功能齐全的应用程序：

https://codesandbox.io/s/renderbuttonsnewlinefixing-cherry-h0br4o-forked-88d2q7?file=/src/components/Main.jsx

类似堆栈问题：how do i generate a line break inside a loop in react?

（但我不确定如何从这个问题中准确实现这种方式，因为它对我来说效果不佳）

您的回答确实对我有很大帮助，因为我目前正在学习 React 基础知识，涉及映射和渲染组件。非常感谢！

Answer 1

试试这个请

  {products.length && products.map((product, index) => 
        <>
              <Product key={product.id} product={product} onAdd={onAdd} />
              {products.length > index && <br/>}
        </>
   )}

Answer 2

如果您使用引导程序，您可以利用 flexbox 样式并利用 flex-wrap 属性，然后调整您的 max-width 直到您可以看到每行仅呈现 5 个项目。

<div class="d-flex flex-wrap" style={{ maxWidth: YOUR_MAX_WIDTH_HERE }}>
  {products.map((product) => (
        <Product key={product.id} product={product} onAdd={onAdd} />
   ))}
</div>

Answer 3

如果你选择 React Bootstrap 或 AntD，你可以使用网格系统快速实现这一点。 https://ant.design/components/grid/

但是，就您的要求而言，这应该可行:)。用https://playcode.io/react 测试了它

const displayProducts = (products)=>{
return products.map((product, i)=>{
  return (
    <div key={i}>
      <Product/>
      { (i+1) % 5 === 0 ? <br/> : null}
    </div>)
});

}

Answer 4

这对你有用吗？我假设您只需要换行符，而不是文字 <br />。

import React from "react";
import Product from "./Product";

export default function Main(props) {
  const { products, onAdd } = props;

  return (
    <main className="block col-2">
      <h2>Products</h2>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)"
        }}
      >
        {products.length &&
          products.map((product) => (
            <Product key={product.id} product={product} onAdd={onAdd} />
          ))}
      </div>
    </main>
  );
}

将 gridTemplateColumns: "repeat(5, 1fr)" 这一行中的 1fr 更改为您想要的每个产品的任何宽度。 1fr 表示空间为每个产品平分。