javascript - 如何使用 Typescript 在 React 卡组件中映射本地数组？

Question

我有这样的接口(interface):

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()像这样的功能:

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

这会将数组中的每个元素映射到 <Card> newsItem 访问数组中每个条目的元素.我希望这就是您想要的!