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

大佬教程收集整理的这篇文章主要介绍了创建一个从数组接收信息并将其添加到我的模板卡片组件的 for 循环，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我有一个显示模板的 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}
    //      />

解决方法

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>
  );
};

大佬总结

以上是大佬教程为你收集整理的创建一个从数组接收信息并将其添加到我的模板卡片组件的 for 循环全部内容，希望文章能够帮你解决创建一个从数组接收信息并将其添加到我的模板卡片组件的 for 循环所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。