时间戳

首页 > 解决方案 > 如何在 React 中渲染同一类的多个对象？（如 Instagram、Facebook 或 Pinterest）

javascript - 如何在 React 中渲染同一类的多个对象？（如 Instagram、Facebook 或 Pinterest）

问题描述

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

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

标签： javascriptnode.jsreactjsfrontendrender

解决方案

您可以在常量中显示带有可变数据的卡片，然后将道具传递给它。

例如

代码沙盒链接

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>

推荐阅读