我有一個包含兒童的列 Wrapper：
const ThreeColumnWrapper: React.FC = (props) => {
const { children } = props;
const itemLength = React.Children.count(children);
const isOdd = IsOdd(itemLength);
const { isCompact } = MediaQuery();
return (
<Base>
{React.Children.map(children, (child, index) => {
return (
<>
{isCompact && isOdd && index === 0 ? (
<Full>{child}</Full>
) : (
<ThreeByTwo>{child}</ThreeByTwo>
)}
</>
);
})}
</Base>
);
};
我像這樣映射它：
const columnComponentMap = {
3: ThreeColumnWrapper
};
在我的網格中，我稱之為::
const CategoryGrid: React.FC<PropType> = (props) => {
const { categories, columns } = props;
const Component = columnComponentMap[columns];
return (
<Component>
{categories.map((category, index) => {
<ImageCard
key={index}
imageURL={category.image}
linkURL={category.url}
title={category.title}
aspectRatio="1_1"
/>;
})}
</Component>
);
};
在我的類別資料中，我有 7 個專案，但是當它們來到我的 Wrapper 時，我只會得到未定義，為什么？
結果的影像：
uj5u.com熱心網友回復：
<Component>
{categories.map((category, index) => {
// Missing return here
return <ImageCard
key={index}
imageURL={category.image}
linkURL={category.url}
title={category.title}
aspectRatio="1_1"
/>;
})}
</Component>
你錯過了回報。
這是一個很容易犯的錯誤，.map()原因之一是當我只有一條指令時我喜歡隱式回傳
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/382660.html
標籤：javascript 反应 打字稿
上一篇：匯入語意UI后，使用TypeScript的Create-React-App無法編譯
下一篇：打字稿：從函式引數中選擇鍵