创建一个从数组接收信息并将其添加到我的模板卡组件的 for 循环

Question

我有一个显示模板的 reactjs + typescript 组件：

我想用数组传递模板详细信息，例如标题、描述和图像。

import ActionPageTemplateContainer, { Template } from "./ActionPageTemplateContainer";


type Props = {
    onOnboardingComplete: Function;
};

let templates: Template[];

// TODO: make sure this is tree shaked once Meteor implements that feature.
if (Meteor.isProduction) {
    templates = [];
} else {
    templates = [
        {
            title: "Groceries",
            description: "blablabalblabla",
            imgURL: "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png",
        },
    ];
}

    <ActionPageTemplateContainer templates={templates} />

在我的 ActionPageTemplateContainer 中，我曾经有一个包含模板卡的容器，但现在我需要执行一个循环，以便每个模板卡从我的数组中接收信息，我该怎么做？

我的 ActionPageTemplateContainer 如下所示：

import React from "react";
// import TemplateCard from "/imports/cuadds/client/components/modals/templates/TemplateCard";
import styles from "./styles/actionpage.m.css";

// const groceries = "https://res.cloudinary.com/deruwllkv/image/upload/v1625753993/groceries.png";
// const shopping = "https://res.cloudinary.com/deruwllkv/image/upload/v1625753766/shopping.png";
// const travel = "https://res.cloudinary.com/deruwllkv/image/upload/v1625753885/travel.png";
// const description = "Description of what this things does so the reader can have info of";

export type Template = {
    title: string;
    description: string;
    imgURL?: string;
};

type Props = {
    templates?: Template[];
};

const ActionPageTemplateContainer = ({ templates }: Props) => {
    const children = [];

    for (let i = 0; i < templates.length; i++) {
        const template = 
    }

    return <div className={styles.scrollContainer}>{children}</div>;

    // return (
    //  <div className={styles.scrollContainer}>
    //      <TemplateCard
    //          title={"Grocery List"}
    //          description={description}
    //          img={groceries}
    //          classNameToAdd={styles.cardContainer}
    //      />
    //      <TemplateCard
    //          title={"Shopping Space"}
    //          description={description}
    //          img={shopping}
    //          classNameToAdd={styles.cardContainer}
    //      />

Answer 1

您可以映射templates 数组

const ActionPageTemplateContainer = ({ templates }: Props) => {
  return (
    <div className={styles.scrollContainer}>
      {templates.map((item) => (
        <TemplateCard
          title={item.title}
          description={item.description}
          img={item.imgURL}
          classNameToAdd={styles.cardContainer}
        />
      ))}
    </div>
  );
};