类型 '{ children: string; onClick: () => void; }' 不能分配给类型"内部属性"

Question

我有一个父功能组件和一个子功能组件，如下所示。父组件是NavBar.tsx

interface NavBarType {
top: number;
}
const NavBar = (props: NavBarType) => {
const scrollDown = () => {
window.scrollTo({
top: props.top,
behavior: "smooth",
});
};
return (
<AppBar
position="static"
sx={{
flexDirection: "row",
justifyContent: "flex-end",
background: "#7E685A",
}}
>
<Link onClick={scrollDown}>About</Link>
<Link onClick={scrollDown}>Skills</Link>
<Link onClick={scrollDown}>Education</Link>
<Link onClick={scrollDown}>Experience</Link>
<Link onClick={scrollDown}>Contact Me</Link>
<Link onClick={scrollDown}>Resume</Link>
</AppBar>
);
};
export default NavBar;

子组件是Link.tsx

interface LinkType {
onClick: React.MouseEventHandler<HTMLElement>;
}
const Link: React.FC<LinkType> = (props: LinkType) => {
return <Typography onClick={props.onClick} className={classes.Link} />;
};
export default Link;

父组件中的<Link>抛出错误

Type '{children: string;onClick: () =>无效;}'不能赋值给类型'IntrinsicAttributes &LinkType"。财产"孩子"可以不存在类型'IntrinsicAttributes &LinkType"。

不确定为什么会抛出这个错误。我检查了所有的类型。无法识别。如果有人能帮助我，请。

Answer 1

React.FC不再在其类型中包含children属性，因此在这种情况下，您的LinkType接口只接受onClick而不接受其他任何属性。此外，您的Typography元素也没有传递给它的子元素，因此要解决这个问题，您需要进行一些更改:

1. 添加children到LinkType

interface LinkType {
children: ReactNode;
onClick: React.MouseEventHandler<HTMLElement>;
}

2. 在Typography上渲染传递的子节点

const Link: React.FC<LinkType> = (props: LinkType) => {
return <Typography onClick={props.onClick} children={props.children} className={classes.Link} />;
};

或

const Link: React.FC<LinkType> = (props: LinkType) => {
return (
<Typography onClick={props.onClick} className={classes.Link}>
{props.children}
</Typography>
);
};