Reaction功能组件中的排版检查 [英] TypeScript checking in React Functional components
本文介绍了Reaction功能组件中的排版检查的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我开始使用Reaction应用程序(next.js)上的TypeScript,但我不确定如何键入Reaction组件。
我有一个组件,如.
type Props = {
children: JSX.Element;
};
export default function SiteLayout({ children }: Props): React.FC {
return (
<div>
{children}
</div>
)
但这会给我以下错误:
var子项:JSX.Element
类型"element"不可分配给类型"fc<;{}>;"。
类型‘element’不提供签名‘(道具:{Children?:ReactNode;},context?:any):ReactElement<;any,any>;’.ts(2322)
我还尝试简单地使用JSX.Element
:
type Props = {
children: JSX.Element;
};
export default function SiteLayout({ children }: Props): JSX.Element {
return (
<div>
{children}
</div>
)
但这在子组件中出现以下错误。
(别名)函数SiteLayout({Children}:props):JSX.Element 导入站点布局
此JSX标记的"Children"属性需要一个"element"类型的子项,但提供了多个子项。ts(2746)
上述组件正在由Next.jspage组件使用,如:
import Head from 'next/head';
import SiteLayout, { siteTitle } from '../../components/SiteLayout';
export default function myPage() {
const pageTitle = 'My Page';
return (
<SiteLayout>
<Head>
<title>{siteTitle + ' - ' + pageTitle}</title>
</Head>
<div>
content...
</div>
</SiteLayout>
);
}
正确的方法是什么?我搞不清什么时候应该使用JSX.Element
,什么时候应该使用React.FC
。
推荐答案
函数的返回类型不是组件,函数本身是组件。这就是为什么不是
function SiteLayout({ children }: Props): React.FC { ...
应该是:
const SiteLayout: React.FC<Props> = ({ children }: Props) => {
return (
<div>
{children}
</div>
);
}
关于children
道具的类型,如果对子类(字符串、布尔、元素等)没有限制,最好使用ReactNode
:
type Props = {
children: React.ReactNode
}
Here's定义方式。
这篇关于Reaction功能组件中的排版检查的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文