我有一个非常简单的功能组件如下：
import * as React from 'react';
export intece AuxProps {
children: React.ReactNode
}
const aux = (props: AuxProps) => props.children;
export default aux;
和另一个组件：
import * as React from "react";
export intece 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”不可分配给类型“ElementCl”。[2605]
如何正确键入？
742
Just
children:React.ReactNode.
115
为了在 JSX 中使用<Aux>，它需要是一个返回ReactElement<any> | null的函数。这是函数组件的定义。
然而，它目前被定义为返回React.ReactNode的函数，这是一个更广泛的类型。
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
通过将返回的值包装到 React Fragment（<></>）中，确保不需要的类型被中和：
const aux: React.FC<AuxProps> = props =>
<>{props.children}</>;
88
You can use
ReactChildrenandReactChild:
import React, { ReactChildren, ReactChild } from 'react';
intece AuxProps {
children: ReactChild | ReactChildren;
}
const Aux = ({ children }: AuxProps) => (<div>{children}</div>);
export default Aux;
如果你需要传递元素的平面数组：
intece AuxProps {
children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}
80
这是为我工作的：
intece Props {
children: JSX.Element[] | JSX.Element
}
编辑我建议现在使用children: React.ReactNode。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（12条）