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屋！
查看全文
