如何在反应应用程序中使用静态信息？答案

【问题标题】：How to use static information in react app?如何在反应应用程序中使用静态信息？
【发布时间】：2022-01-12 22:56:16
【问题描述】：

我有一张专为反应设计的卡片。卡片需要出现在整个项目中（在不同的页面上）。

每张卡片会有不同的标题、字幕和金额。

我该怎么做呢？我想过创建一个对象，然后循环遍历它。在不同页面上调用卡片组件，但这不允许我根据页面更改内容。

卡片.js

const cards = [
   {title: Card A, subtitle: Card A Subtitle},
   {title: Card A2, subtitle: Card A2 Subtitle},
   {title: Card A3, subtitle: Card A3 Subtitle},
]

{cards.map through cards to display it}

ExamplePageA.js。（卡片：3，标题：CardA，副标题：CardASubtitle....）

<Card />
<OtherStuff />

ExamplePageB.js (Card:2, title: cardB, Subtitle: CardBSubtitle....)

<Card />
<OtherStuffB />
<OtherStuffToo />

【问题讨论】：

当您在不同的页面上使用道具时，如何将道具传递给您的卡片？这是反应标准方法。如果您对这种解决方案感到满意。请分享您的卡片组件
@DaviCheliMiquelim 是否可以传入多个道具（同类）。例如，3 种类型的标题。并使其可读？
是的。看看我的回答。您可以添加任意数量的道具

标签： javascript reactjs jsx

【解决方案1】：

您必须将道具传递给您的卡片组件，以便您可以多次使用它来处理不同的数据：

export const Card = (props) => {
  return (
    <div>{props.title}<div/>
    <div>{props.subtitle}<div/>
  )
}

然后你应该像这样使用它：

<Card title="Your title" subtitle="Your subtitle"/>

如果你想通过你的卡片数组进行映射，你应该在你的父组件的 return 中像这样处理它：

{cards.map((card) => <Card title={card.title} subtitle={card.subtitle}/>)}

【讨论】：