Как я могу сделать несколько объектов одного класса в React?(например, Instagram, Facebook или Pinterest) - PullRequest
Новая
       11

Как я могу сделать несколько объектов одного класса в React?(например, Instagram, Facebook или Pinterest)

0 голосов
/ 22 февраля 2019

В основном я хочу показать компонент ( карта ), который показывает продукт, но несколько раз.Компонент берет данные из базы данных, поэтому мне нужно только визуализировать компонент <Product /> с другим props.На следующем изображении полный рендер, как и должно быть.Что мне нужно сделать, так это чтобы каждая карта извлекала данные, проходя через базу данных, и отображала определенное количество карт во время прокрутки (например, когда она прокручивается на главной странице IG и больше публикацийпоявляется)

-> IMAGE Пример: https://imgur.com/a/nCi9YaS

1 Ответ

0 голосов
/ 22 февраля 2019

Вы можете отобразить свою карту с переменными данными в константе и затем передать ей реквизиты.

Например

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>
...