我正在將一個 SVG 圖示道具傳遞給我的組件，該組件是一個包含我的 SVG 組件資料的陣列，但它在打字稿中顯示了這個錯誤，我正在使用材質 UI
Type '{ key: number; data: { id: number; icon: ReactNode; }; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...> & { ...; }'.
Property 'data' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...> & { ...; }
這是我的界面道具
interface Props {
icons?: [
{
id:number;
icon:React.ReactNode;
style?:object;
}
];
}
我的 SVG 物件
[
{
id:1,
icons: MySVGIcon,
style: iconStyle
}
]
這是我要顯示 svg 圖示的組件
const Title: React.FC<Props> = ({icons=[]}}) => {
return (
<Grid container direction='row' justifyContent="center" alignItems="center">
<Grid item xs={2}>
{icons.map(({icon,id}) => <SVGIcon key={id} data={icon} />)}
</Grid>
</Grid>
)
}
這是我的 SVGIcon 組件
import React from 'react'
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
const SVGIcon:React.FC<SvgIconProps> = (props) => {
return (
<SvgIcon {...props} />
)
}
uj5u.com熱心網友回復：
您的自定義SVGIcon組件有一個名為 的自定義道具名稱icon，您也需要為此創建一個自定義道具型別：
type SVGIconProps = {
icon: React.ReactNode;
} & SvgIconProps;
const SVGIcon: React.FC<SVGIconProps> = (props) => {
return <SvgIcon {...props} />;
};
interface Props {
icons?: {
id: number;
icon: React.ReactNode;
style?: object;
}[];
}
const Title: React.FC<Props> = ({ icons }) => {
return (
<Grid container direction="row" justifyContent="center" alignItems="center">
<Grid item xs={2}>
{icons.map((icon, id) => (
<SVGIcon key={id} icon={icon} />
))}
</Grid>
</Grid>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/340953.html