Propblem со ссылкой в следующем js с типом script: свойство `href` ожидает `string` или `object` в `<Link>`, но вместо этого получило `undefined`
у меня есть этот код о компоненте Customized link, я сделал это по сценарию типа:
...
const NavLink: React.FC<{
activeClassName: string;
className: string;
href: string;
clickEvent?: MouseEventHandler;
onClick?: MouseEventHandler;
title: string;
}> = (children, props) => {...}
это моя строка компонента ссылки:
<Link href = {props.href} onClick = {props.clickEvent} passHref>
вот как я называю компонент:
<NavLink
href='/'
className = {styles.navlink}
activeClassName = {styles.navlink__active}
title='my link'
/>
я получил ошибку в названии. любая помощь?
Ответы 1
Это происходит из-за того, как вы получили props от вашего компонента.
При использовании React вы всегда должны получать props в качестве первого параметра функционального компонента.
В вашем случае вы сначала получили children, а затем props в качестве второго параметра, но это должен быть только один параметр, потому что свойство children также принимается в качестве реквизита.
Простой способ исправить это — деструктурировать children и использовать rest operator, чтобы по-прежнему получать остальные реквизиты в виде переменной с именем props, как в следующем примере:
const NavLink: React.FC<{
activeClassName: string;
className: string;
href: string;
clickEvent?: MouseEventHandler;
onClick?: MouseEventHandler;
title: string;
}> = ({ children, ...props }) => {...}
Это должно сохранить переменные с тем же именем, но теперь вы будете деструктурировать как дочерние элементы, так и все реквизиты из первого параметра функционального компонента.
у меня есть чек: {дети !== undefined && children}
@michael, должно быть, потому что React.FC больше не добавляет дочерний тип к своим реквизитам. Вы можете добавить такие типы: children: React.ReactNode и TypeScript перестанет выдавать вам эту ошибку.
я попытался получить свойство «дети» не существует для типа «{activeClassName: string; имя_класса: строка; ссылка: строка; clickEvent?: MouseEventHandler<Element> | неопределенный; onClick?: MouseEventHandler<Element> | неопределенный; заголовок: строка; }'