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

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

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]

我如何正确地输入这个?

当前回答

你应该知道任何react组件都应该返回null或react。元素，但道具的类型。children是React。ReactNode，所以你需要使用这些道具。子元素，使babel配置元素的构造函数。任何react组件的第二个规则是，命名的第一个字母应该是大写字母，以让react识别出该组件不是HTML标记。

代码应该是这样的。

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

另一个提示，如果你仍然使用typescript，函数组件的类型应该是React。像这样的FC

type Props = {
   title: string;
}

const Aux:React.FC<Props> = (props) =>
(
    <div>
        <h3>{props.title}</h3>
        { props.children }
        {/* children is exist by default in type React.FC */}
    </div>
)

2021-08-19 11:17:55

其他回答

为了在JSX中使用<Aux>，它需要是一个返回ReactElement<any> | null的函数。这就是函数分量的定义。

然而，它目前被定义为一个返回React的函数。ReactNode，这是一个更广泛的类型。正如React类型所说:

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

通过将返回值包装到React Fragment(<></>)中，确保不需要的类型被中和:

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

2018-12-09 03:43:33

只有子节点:React.ReactNode。

2019-07-29 11:57:35

代码应该是这样的。

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

另一个提示，如果你仍然使用typescript，函数组件的类型应该是React。像这样的FC

type Props = {
   title: string;
}

const Aux:React.FC<Props> = (props) =>
(
    <div>
        <h3>{props.title}</h3>
        { props.children }
        {/* children is exist by default in type React.FC */}
    </div>
)

2021-08-19 11:17:55

这对我来说很管用:

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

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

2019-01-04 18:36:44

你可以使用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

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

推荐文章

最新文章

标签