我在尝试仅允许将特定子项传递给组件时遇到了麻烦。
这是我的组件,HeaderLink
import { SFC, ReactElement } from "react";
import "./Header.scss";
export interface IHeaderLinkProps {
url: string;
label: string;
}
const HeaderLink: SFC<IHeaderLinkProps> = ({ url, label }): ReactElement => (
<li className="nav-item">
<a href={url}>{label}</a>
</li>
);
export default HeaderLink;
和标题
import { SFC, ReactElement } from "react";
import { IHeaderLinkProps } from "./HeaderLink";
import "./Header.scss";
interface IHeaderProps {
children: ReactElement<IHeaderLinkProps> | ReactElement<IHeaderLinkProps>[];
}
const Header: SFC<IHeaderProps> = ({ children }): ReactElement => {
return (
<header className="header">
<div className="container">
<div className="row">
<div className="col">
<img
className="header__logo"
src={"/logo.png"}
alt="monqrime-logo"
/>
<ul className="header__nav">{children}</ul>
</div>
</div>
</div>
</header>
);
};
所以问题是我只想允许 HeaderLink 组件作为子组件传递给 Header,但我当前的解决方案仍然允许我将所有内容都作为子组件。
最佳答案
我可能会将 IHeaderProps.children
声明为:
children: React.ReactElement<IHeaderProps> | React.ReactElement<IHeaderProps>[];
考虑到有一个和多个 child 的可能性。
无论如何,你想要的都是不可能的。请参阅:
您可以做的是声明一个 prop,比如说 links?: IHeaderLinkProps[]
,来传递创建这些 HeaderLink
所需的 props,而不是比它们的 JSX 更重要,并将它们渲染在 Header
中:
interface IHeaderProps {
children?: never;
links?: IHeaderLinkProps[];
}
...
const Header: React.FC<IHeaderProps> = ({ links }) => {
return (
...
<ul className="header__nav">
{ links.map(link => <HeaderLink key={ link.url } { ...link } />) }
</ul>
...
);
};
关于reactjs - React + TypeScript 仅允许特定类型的子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59381291/