TypeScript和React-子类型？

Question

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

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]

如何正确输入？

Answer 1

您可以使用ReactChildren和ReactChild：

import React, { ReactChildren, ReactChild } from 'react';
 
interface AuxProps {
  children: ReactChild | ReactChildren;
}

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

export default Aux;

如果您需要传递元素的平面数组：

interface AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}

Answer 2

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

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

Answer 3

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

Answer 4

这对我有用：

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

Answer 5

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

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

Answer 6

你可以像这样声明你的组件：

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

Answer 7

AReact Node是以下类型之一：

• Boolean （忽略）
• null或undefined（被忽略）
• Number
• String
• A React element（结果JSX）
• 上述任何一项的数组，可能是嵌套的

Answer 8

只是 children: React.ReactNode

Answer 9

函数组件返回类型仅限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 元素 as children，我们不小心在其中添加了 a string。然后上面的解决方案与ReactNode- 看看链接的操场相比会出错。

Typedchildren对于非 JSX 道具也很有用，比如Render Prop回调。

Answer 10

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

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

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

import React from 'react';

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

将鼠标悬停在children道具上会显示类型。你知道什么——它的类型是ReactNode（不需要ReactNode[]）。

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

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

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

Answer 11

您还可以使用JSX.ElementChildrenAttribute

export default function Layout({children}: JSX.ElementChildrenAttribute) {
    return <div>
        {children}
    </div>
}

Answer 12

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

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

那对我有用。子节点可以是许多不同的东西，因此显式类型可能会遗漏案例。

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

Answer 13

对我来说“JSX.Element”有效，

interface childrenProps {
    children: JSX.Element;
}

const index = ({ children }: childrenProps) => {
    return (
        <>
            <NavBar />
            {children}
        </>
    );
};

export default index;

Answer 14

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

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

Answer 15

这一直对我有用：

type Props = {
  children: JSX.Element;
};

Answer 16

我正在使用以下

type Props = { children: React.ReactNode };

const MyComponent: React.FC<Props> = ({children}) => {
  return (
    <div>
      { children }
    </div>
  );

export default MyComponent;