TypeScript和React-子类型？

Tom梅Green2020-03-17

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

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]

如何正确输入？

卡卡西梅Harry2020/03/17 11:57:50

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

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

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

因此，以您的示例为例：

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

Tony小胖2020/03/17 11:57:50

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

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

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

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

西里斯丁2020/03/17 11:57:49

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

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

Sam逆天2020/03/17 11:57:49

这对我有用：

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

TomNear前端2020/03/17 11:57:49

为了<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}</>;

古一小宇宙2020/03/17 11:57:49

只是 children: React.ReactNode

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer