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

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

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]

我如何正确地输入这个?

当前回答

您也可以使用JSX。ElementChildrenAttribute

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

2021-08-04 10:08:21

其他回答

你也可以扩展React。PropsWithChildren到你的界面，其中包含children属性。

interface Props extends React.PropsWithChildren{
    listItems: Items[],
    clickItem?: () => void,
    
}

或者您可以直接定义子元素

interface Props{
    listItems: Items[],
    clickItem?: () => void,
    children: React.ReactNode  
}

const List:FC<Props> = ({listItems,clickItem,children}) =>  {

  return (
    <>
    {children}
    </>
    
  )
}

或者你可以这样做。这是定义道具类型的另一种方式

const List = ({ children }: {children: React.ReactNode}) =>  {

2022-07-06 17:25:09

我用的是下面的

type Props = { children: React.ReactNode };

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

export default MyComponent;

2020-12-25 16:37:32

函数组件的返回类型在TypeScript中被限制为JSXElement | null。这是当前的类型限制，纯React允许更多的返回类型。

最小的演示片段

你可以使用类型断言或片段作为解决方案:

const Aux = (props: AuxProps) => <>props.children</>; 
const Aux2 = (props: AuxProps) => props.children as ReactElement;

ReactNode

孩子们:反应。如果目标是为Aux提供强类型，那么ReactNode可能不是最优的。

几乎任何东西都可以赋值给当前的ReactNode类型，这相当于{}| undefined | null。对于你的情况，更安全的类型可能是:

interface AuxProps {
  children: ReactElement | ReactElement[]
}

例子:

由于Aux需要React元素作为子元素，我们意外地向它添加了一个字符串。然后上面的解决方案将错误与ReactNode对比-看看链接操场。

类字子函数对于非jsx道具也很有用，比如Render Prop回调函数。

2020-03-17 11:39:09

您可以创建一个简单的组件，它只输出子道具，没有类型或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

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

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

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

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

2019-04-25 23:11:10

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

推荐文章

最新文章

标签