我有一个非常简单的功能组件如下:

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]

我如何正确地输入这个?


当前回答

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

const App: FC<Props> = ({children}) => (<div>{children}</div>)

其他回答

React Node是以下类型之一:

布尔值(被忽略) Null或undefined(被忽略) 数量 字符串 React元素(JSX的结果) 上述任意一个的数组,可能是嵌套的数组

作为包含子类型的类型,我使用:

type ChildrenContainer = Pick<JSX.IntrinsicElements["div"], "children">

这个子容器类型足够通用,可以支持所有不同的情况,并且与ReactJS API保持一致。

所以,在你的例子中,它会是这样的:

const layout = ({ children }: ChildrenContainer) => (
    <Aux>
        <div>Toolbar, SideDrawer, Backdrop</div>
        <main>
            {children}
        </main>
    <Aux/>
)

为了在JSX中使用<Aux>,它需要是一个返回ReactElement<any> | null的函数。这就是函数分量的定义。

然而,它目前被定义为一个返回React的函数。ReactNode,这是一个更广泛的类型。正如React类型所说:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

通过将返回值包装到React Fragment(<></>)中,确保不需要的类型被中和:

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;

这个解决方案对我来说非常有效

interface Props {
    children: Array<ReactElement<ChildProps, JSXElementConstructor<ChildType>>>;
}

更新:一个全面的例子,这样更容易理解。

interface ChildProps {}

class ChildComponent extends React.Component<ChildProps> {}

interface ParentProps {
    children: Array<ReactElement<ChildProps, JSXElementConstructor<ChildComponent>>>;
}

class ParentComponent extends React.Component<ParentProps> {}

对我来说,@ sibrens的答案还不够清楚,但我找到了这个SO答案,并将其全部内联(这可能不是最短的方法,但我发现最容易掌握的方法)。

function MyComponentWithChildren({
    customProp,
    children, /*notice the children are implicit*/
}: React.PropsWithChildren<{ customProp: any }>) {
    return <div>{children}</div>;
}