如何使用 Typescript 在 React 卡组件中使用 map 本地数组？

Question

我有这样的接口：

interface INewsProps {
  newsType: string;
  data: INewsContentProps[];
}

interface INewsContentProps {
  title: string;
  newsContent: string;
}

我的数组是这样的：

  export const newsList: INewsContentProps[] = [
  {
    title: 'Lorem ipsum',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
  },
  {
    title: 'Lorem ipsum2',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
  }
];

我需要从数组中获取属性以在此处显示：

export const NewsCard = () => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {props.title} 
              </Typography>
               <Typography>
                {props.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

我是 React 和 TypeScript 的新手，所以如果有人能帮助我，我将不胜感激。

Answer 1

不确定您是否需要阵列中的每个条目一张卡，但您想使用阵列的map() function，如下所示：

export const NewsCard = (newsItem) => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {newsItem.title} 
              </Typography>
               <Typography>
                {newsItem.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

return newsList.map(newsItem => NewsCard(newsItem));

这会将 map 数组中的每个元素转换为<Card>元素，其中数组中的每个条目都由newsItem访问。 我希望这是你想要的！

Answer 2

要渲染多个元素，您可以使用.map() function 来处理 arrays。 你的 NewsCard 组件应该接受一个参数作为访问props.title和props.newsContent的 props。

return newsList.map((content, ix) => (
    <NewsCard
      key={ix + content.title}
      title={content.title}
      newsContent={content.newsContent}
    />
  ));

您可以在Codesandbox上参考此工作演示

Answer 3

您可以使用 NewsCard 作为组件。 可以这么说

export const NewsCard = (props) => {
  return (
     <div>
        <Card>
          <CardActionArea>
            <CardContent>
              <Typography>
                {props.title} 
              </Typography>
               <Typography>
                {props.newsContent} 
              </Typography>
              <ContextMenu />
            </CardContent>
          </CardActionArea>
        </Card>
     </div>
  );
};

现在你有一个名为 NewsCard 的组件，它使用类型的道具

{ title: string, newsContent: string | any }

现在你有一个列表

{
    title: 'Lorem ipsum',
    newsContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit dui ac accumsan consequat.'
}

假设您使用 App 组件来显示卡片列表

function App(){

return (
    <>
    {newsList.map((cardListItem, index)=> <NewsCard key={`card-${index}`} title={cardListItem.title} newsContent={cardListItem.newsContent} /> )}
    </>
    );
}

假设 NewsCard 在同一个文件中，否则您需要导入它。

有关更多信息，请访问文档