如何在 React 中渲染多个相同 class 的对象？（例如 Instagram、Facebook 或 Pinterest）

Question

基本上我想展示一个展示产品的组件（card），但是要展示几次。该组件从数据库中获取数据，因此我只需要渲染具有不同 props 的 <Product /> 组件。在下一张图片中，它应该是完整的渲染图。我需要做的是每张卡片通过数据库提取数据并在滚动时呈现一定数量的 cards （例如，当它在主 IG 页面上滚动时更多的出版物正在出现）

--> 图片示例：https://imgur.com/a/nCi9YaS

Answer 1

你可以用常量显示你的卡片，然后传递道具给它。

例如

CodeSandbox Link

import React from "react";
import ReactDOM from "react-dom";
import { Card } from "antd";

import "./styles.css";

function App() {
  const card = prop => (
    <div style={{ background: "#ECECEC", padding: "30px" }}>
      <Card title="Card title" bordered={true} style={{ width: 300 }}>
        <p>{prop.title}</p>
      </Card>
    </div>
  );
  return (
    <div className="App">
      {card({ title: "Facebook" })}
      {card({ title: "Twitter" })}
      {card({ title: "Instagram" })}
      {card({ title: "YouTube" })}
    </div>
  );
}

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

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

如何在 React 中渲染多个相同 class 的对象？（例如 Instagram、Facebook 或 Pinterest）

How can I render several objects of the same class in React? (like Instagram, Facebook or Pinterest)

javascript

frontend

render

node.js

reactjs

如何在 React 中渲染多个相同 class 的对象？ （例如 Instagram、Facebook 或 Pinterest）

How can I render several objects of the same class in React? (like Instagram, Facebook or Pinterest)

javascript

frontend

render

node.js

reactjs

如何在 React 中渲染多个相同 class 的对象？（例如 Instagram、Facebook 或 Pinterest）