Машинописный текст React с элементом SVG
Я продолжаю получать сообщение об ошибке для моего компонента с картой значков для элементов значков, сообщение об ошибке для моего кода приведено ниже. и я пытаюсь SVGProps<SVGSVGElement> | Element; определить тип с помощью поиска, но все равно получаю красное подчеркивание SvgIconProps в сообщении об ошибке типа.
Type '({ icon, width, height, fill, className, }: SvgIconProps) => string | Element | JSX.Element | SVGProps<SVGSVGElement>' is not assignable to type 'FC<SvgIconProps>'.
Type 'string | Element | JSX.Element | SVGProps<SVGSVGElement>' is not assignable to type 'ReactNode'.
Type 'Element' is not assignable to type 'ReactNode'.
Type 'Element' is missing the following properties from type 'ReactPortal': type, props, key
Код здесь внизу и песочница кода здесь
import React, { SVGProps } from "react";
type iconListType = {
[key: string]: string | SVGProps<SVGSVGElement> | Element;
};
export const iconList: iconListType = {
fillOn:
"M8 2H16C17.6569 2 19 3.34315 19 5V19C19 20.6569 17.6569 22 16 22H8C6.34315 22 5 20.6569 5 19V5C5 3.34315 6.34315 2 8 2ZM16 20.5C16.8284 20.5 17.5 19.8284 17.5 19V5C17.5 4.17157 16.8284 3.5 16 3.5H8C7.17157 3.5 6.5 4.17157 6.5 5V19C6.5 19.8284 7.17157 20.5 8 20.5H16ZM12.5 5H8V10H12.5V5ZM9.51 8.5H11V6.5H9.51V8.5ZM8 14.5H16V16H8V14.5ZM16 17.5H8V19H16V17.5ZM16 10H14V8.51H16V10ZM16 11.5H8V13H16V11.5Z",
,
ads: (
<svg
width = "16"
height = "16"
viewBox = "0 0 24 24"
fill = "none"
className = "pr-1"
xmlns = "http://www.w3.org/2000/svg"
>
<path
d = "M10.75 15.4999C11.1642 15.4999 11.5 15.1641 11.5 14.7499C11.5 14.3356 11.1642 13.9999 10.75 13.9999C10.3358 13.9999 10 14.3356 10 14.7499C10 15.1641 10.3358 15.4999 10.75 15.4999Z"
fill = "#F6F6F9"
/>
<path
d = "M19.27 8.99985L14.16 5.99985C13.9906 5.90762 13.7922 5.88421 13.6059 5.9345C13.4197 5.98478 13.26 6.10488 13.16 6.26985C13.0652 6.43872 13.0404 6.63801 13.0909 6.82497C13.1414 7.01192 13.2631 7.17164 13.43 7.26985L18.54 10.2699C18.8478 10.4443 19.1038 10.6972 19.282 11.0029C19.4601 11.3086 19.5539 11.6561 19.5539 12.0099C19.5539 12.3636 19.4601 12.7111 19.282 13.0168C19.1038 13.3225 18.8478 13.5754 18.54 13.7499L7.54003 20.2299C7.23599 20.4054 6.8911 20.4978 6.54003 20.4978C6.18895 20.4978 5.84406 20.4054 5.54003 20.2299C5.23482 20.0536 4.98159 19.7999 4.80598 19.4944C4.63037 19.1888 4.53863 18.8423 4.54003 18.4899V5.48985C4.53863 5.13743 4.63037 4.7909 4.80598 4.48534C4.98159 4.17979 5.23482 3.92606 5.54003 3.74985C5.84406 3.57431 6.18895 3.4819 6.54003 3.4819C6.8911 3.4819 7.23599 3.57431 7.54003 3.74985L10 5.24985V11.9999C10 12.1988 10.079 12.3895 10.2197 12.5302C10.3603 12.6708 10.5511 12.7499 10.75 12.7499C10.9489 12.7499 11.1397 12.6708 11.2804 12.5302C11.421 12.3895 11.5 12.1988 11.5 11.9999V4.81985C11.4996 4.6888 11.4653 4.56008 11.4005 4.44619C11.3357 4.33229 11.2425 4.2371 11.13 4.16985L8.26003 2.48985C7.73118 2.17856 7.12869 2.0144 6.51503 2.0144C5.90136 2.0144 5.29887 2.17856 4.77003 2.48985C4.23518 2.79278 3.78983 3.23159 3.47902 3.76189C3.16821 4.2922 3.00297 4.89518 3.00003 5.50985V18.5099C2.99767 19.1296 3.16039 19.7388 3.47147 20.2748C3.78255 20.8109 4.23076 21.2544 4.77003 21.5599C5.29887 21.8711 5.90136 22.0353 6.51503 22.0353C7.12869 22.0353 7.73118 21.8711 8.26003 21.5599L19.26 15.0799C19.7866 14.7685 20.2229 14.3254 20.526 13.794C20.8291 13.2627 20.9885 12.6616 20.9885 12.0499C20.9885 11.4381 20.8291 10.837 20.526 10.3057C20.2229 9.77435 19.7866 9.33118 19.26 9.01985L19.27 8.99985Z"
fill = "#F6F6F9"
/>
</svg>
),
};
interface SvgIconProps {
icon: string;
fill?: string;
className: string;
width?: number;
height?: number;
}
export const SvgIcon: React.FC<SvgIconProps> = ({
icon = "",
width = 16,
height = 16,
fill,
className,
}) => {
const iconCheck = typeof iconList[icon] === "string";
return icon && iconCheck ? (
<svg
width = {width}
height = {height}
fill = {fill}
viewBox = "0 0 24 24"
className = {className}
xmlns = "http://www.w3.org/2000/svg"
>
<path
fill-rule = "evenodd"
clip-rule = "evenodd"
d = {iconList[icon]}
fill = {fill}
/>
</svg>
) : (
iconList[icon]
);
};
Заранее спасибо!
Обработанный JSX обычно представляет собой просто JSX.Element (который является одним из членов типа объединения React.ReactNode). Вам по какой-то причине нужно что-то более конкретное? Отвечает ли это на ваш вопрос? tsplay.dev/m0dPrm Если да, то могу написать ответ.
Извините, сейчас отредактируйте тестовую среду кода для общего доступа, спасибо!
@AlexWayne Спасибо за ответ, красное предупреждение SvgIcon исчезло, но ` <Path d = "">` теперь содержит ошибку.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я не вижу коды и ссылку на ящик, которую вы предоставили. Но, основываясь на коде и ошибке TypeScript, я бы предложил использовать React.ReactNode вместо Element при передаче типа компонента.
Обновлено: вам не нужно специально передавать SVGProps, ReactNode работает.
Итак, этот тип меняется, чтобы добавить React.ReactNode
type iconListType = {
[key: string]: string | React.ReactNode;
};
Обновлено: удален запутанный комментарий об импорте * как React.
SVGProps<SVGSVGElement> также нельзя назначить ReactNode. См. tsplay.dev/wE0zbW. Кроме того, такой импорт React всегда должен работать. * никогда не должен быть обязательным.
Во-первых, я никогда не говорил, что * обязателен. Он используется, когда мы хотим получить доступ к методу React в пространстве имен React. Итак, что-то вроде React.Component, мы должны импортировать React через *.
SVGProps<SVGSVGElement> — это не тот тип, который вам, вероятно, следует использовать напрямую.
Если вы визуализируете тег <svg>, он возвращает JSX.Element
const test = <svg />
// ^? JSX.Element
И ваш список значков также содержит string, поэтому тип должен быть таким:
type iconListType = {
[key: string]: string | JSX.Element;
};
Исправление, которое показывает другую, несколько несвязанную проблему:
d = {iconList[icon]}
Type 'string | Element' is not assignable to type 'string | undefined'.
Type 'Element' is not assignable to type 'string'.(2322)
Здесь вы не правильно сужаете тип iconList[icon].
Сначала вам нужно присвоить ему значение, которое можно сузить:
const iconContent = iconList[icon]
Затем вы можете сузить это значение:
typeof iconContent === 'string'
? //... use as string ...
: //... use as JSX.Element ...
См. «Игровая площадка» без ошибок типа.
Большое спасибо! Я застрял в этом типе несколько часов. Ошибка исчезла. Спасибо!
Ваши коды и ящик не работают. Возможно, это настройки разрешений или ссылка не работает.