如何使用 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 在同一個文件中，否則您需要導入它。

有關更多信息，請訪問文檔