“儿童”道具是什么类型?

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

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]

我如何正确地输入这个?

当前回答

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

推荐的做法是将props类型写成{children?：任何}

这对我很管用。子节点可以是很多不同的东西，因此显式类型可能会遗漏一些情况。

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

2019-04-25 23:11:10

其他回答

你可以使用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[];
}

2020-06-03 10:26:02

React Node是以下类型之一:

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

2020-09-03 06:16:00

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

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

2020-06-23 11:35:45

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

推荐的做法是将props类型写成{children?：任何}

这对我很管用。子节点可以是很多不同的东西，因此显式类型可能会遗漏一些情况。

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

2019-04-25 23:11:10

您可以创建一个简单的组件，它只输出子道具，没有类型或FC(功能组件)接口。你必须用空的jsx标签<>来换行，因为子标签可以是undefined或null:

import { FC } from "react";

export const Layout: FC = (props) => {
  return <>{props.children}</>;
};

——或——

import { FC } from "react";

export const Layout: FC = ({ children }) => <>{children}</>;

2022-04-21 17:09:03

“儿童”道具是什么类型?

推荐文章

最新文章

标签