TypeScript和React-子类型？

我有一个非常简单的功能组件，如下所示：

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元素的构造函数。类型“未定义”不能分配给类型“ ElementClass”。[2605]

如何正确输入？

只是 children: React.ReactNode

为了<Aux>在您的JSX中使用，它必须是一个返回的函数ReactElement<any> | null。那就是功能组件的定义。

但是，当前定义为return的函数React.ReactNode，这是一个更广泛的类型。正如React类型所说的那样：

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

通过将返回的值包装到React Fragment（<></>）中，确保不需要的类型被中和：

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

这对我有用：

interface Props {
  children: JSX.Element[] | JSX.Element
}

编辑，我建议children: React.ReactNode现在改为使用。

您可以这样声明您的组件：

const MyComponent: React.FunctionComponent = (props) => {
    return props.children;
}

您可以使用ReactChildren和ReactChild：

import React, { ReactChildren, ReactChild } from 'react';

interface AuxProps {
  children: ReactChild | ReactChildren;
}

const Aux = ({ children }: AuxProps) => (<div>{children}</div>);

export default Aux;

从TypeScript网站：https : //github.com/Microsoft/TypeScript/issues/6471

建议的做法是将props类型写为{children ?: any}

那对我有用。子节点可以有很多不同的东西，因此显式键入可能会遗漏大小写。

这里有一个关于后续问题的更长的讨论：https : //github.com/Microsoft/TypeScript/issues/13618，但是任何方法仍然有效。

函数组件的返回类型仅限JSXElement | null于TypeScript。这是当前的类型限制，纯React 允许更多返回类型。

最小的演示片段

您可以使用类型断言或片段作为解决方法：

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement; 

ReactNode

children: React.ReactNode如果目标是为设置强类型，则可能不是最佳选择Aux。

几乎任何东西都可以分配给当前ReactNode类型，相当于{} | undefined | null。对于您的情况，更安全的类型可能是：

interface AuxProps {
  children: ReactElement | ReactElement[]
}

例：

鉴于Aux需要将React元素设置为children，我们不小心在其中添加了一个string。与上述相反，上述解决方案会出错ReactNode-看一下链接的游乐场。

Typed children对于非JSX道具（例如Render Prop回调）也很有用。

您也可以使用React.PropsWithChildren<P>。

type ComponentWithChildProps = React.PropsWithChildren<{example?: string}>;

查找任何类型的一般方法是示例。打字稿的妙处在于，只要拥有正确的文件，您就可以访问所有类型@types/。

为了自己回答这个问题，我只是想到了一个具有children支持的组件react用法。我想到的第一件事是？怎么样<div />？

您需要做的就是打开vscode，并.tsx在react项目中创建一个新文件@types/react。

import React from 'react';

export default () => (
  <div children={'test'} />
);

将鼠标悬停在children道具上会显示类型。而且您知道吗-它的类型是ReactNode（不需要ReactNode[]）。

然后，如果您单击类型定义，它将直接带您children来自DOMAttributesinterface 的定义。

// node_modules/@types/react/index.d.ts
interface DOMAttributes<T> {
  children?: ReactNode;
  ...
}

注意：此过程应用于查找任何未知类型！他们都在那里等着你找到他们:)

作为包含孩子的类型，我正在使用：

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

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

因此，以您的示例为例：

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

这些答案似乎已过时-React现在具有内置类型PropsWithChildren<{}>。它的定义类似于此页面上的一些正确答案：

type PropsWithChildren<P> = P & { children?: ReactNode };

React组件应具有单个包装器节点或返回节点数组。

您的<Aux>...</Aux>组件有两个节点div和main。

尝试将孩子包装在divin Aux组件中。

import * as React from 'react';

export interface AuxProps  { 
  children: React.ReactNode
}

const aux = (props: AuxProps) => (<div>{props.children}</div>);

export default aux;