“儿童”道具的类型是什么？

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

如何正确键入？

Answer 1

您可以使用ReactChildren和ReactChield：

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.ReactNode 的函数，这是一个更广泛的类型。正如 React 类型所说：

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

通过将返回值包装到 React 片段 （

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

Answer 3

只是<代码>孩子:反应。反应节点。