我有一个非常简单的功能组件如下:
import * as React from 'react';
export interface AuxProps {
children: React.ReactNode
}
const aux = (props: AuxProps) => props.children;
export default aux;
另一个组成部分:
import * as React from "react";
export interface LayoutProps {
children: React.ReactNode
}
const layout = (props: LayoutProps) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
{props.children}
</main>
<Aux/>
);
export default layout;
我一直得到以下错误:
(ts)
JSX元素类型“ReactNode”不是JSX元素的构造函数。
类型'undefined'不能赋值给类型'ElementClass'。[2605]
我如何正确地输入这个?
你应该知道任何react组件都应该返回null或react。元素，但道具的类型。children是React。ReactNode，所以你需要使用这些道具。子元素，使babel配置元素的构造函数。
任何react组件的第二个规则是，命名的第一个字母应该是大写字母，以让react识别出该组件不是HTML标记。
代码应该是这样的。
const Aux = (props: AuxProps) => <>props.children</>;
另一个提示，如果你仍然使用typescript，函数组件的类型应该是React。像这样的FC
type Props = {
title: string;
}
const Aux:React.FC<Props> = (props) =>
(
<div>
<h3>{props.title}</h3>
{ props.children }
{/* children is exist by default in type React.FC */}
</div>
)
作为包含子类型的类型，我使用:
type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">
这个子容器类型足够通用，可以支持所有不同的情况，并且与ReactJS API保持一致。
所以，在你的例子中，它会是这样的:
const layout = ({ children }: ChildrenContainer) => (
<Aux>
<div>Toolbar, SideDrawer, Backdrop</div>
<main>
{children}
</main>
<Aux/>
)
