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

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

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]

我如何正确地输入这个?

当前回答

这对我来说很管用:

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

我建议使用children: React。现在改为ReactNode。

2019-01-04 18:36:44

其他回答

React Node是以下类型之一:

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

2020-09-03 06:16:00

这对我来说一直都很有效:

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

2020-08-17 21:35:32

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

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

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

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

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

2020-02-04 11:46:12

这对我来说很管用:

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

我建议使用children: React。现在改为ReactNode。

2019-01-04 18:36:44

import { ReactNode, FC } from 'react'

type Props = { children: ReactNode }

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

2021-11-19 03:13:01

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

推荐文章

最新文章

标签