儿童蚊帐买什么样式的好用:“儿童”道具的类型是什么(react fc children)

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

import * as React from 'react';
export intece AuxProps  { 
    children: React.ReactNode
 }
const aux = (props: AuxProps) => props.children;
export default aux;

和另一个组件:

import * as React from "react";
export intece 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]

如何正确键入?

742
Justchildren:React.ReactNode.
115

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

然而,它目前被定义为返回React.ReactNode的函数,这是一个更广泛的类型。

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

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

const aux: React.FC<AuxProps> = props =>
  <>{props.children}</>;
88
You can useReactChildrenandReactChild:
import React, { ReactChildren, ReactChild } from 'react';
 
intece AuxProps {
  children: ReactChild | ReactChildren;
}
const Aux = ({ children }: AuxProps) => (<div>{children}</div>);
export default Aux;

如果你需要传递元素的平面数组:

intece AuxProps {
  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
}
80

这是为我工作的:

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

编辑我建议现在使用children: React.ReactNode

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(419)
Adobe photoshop cs 4:无法使用adobephotoshopcs5在图像中带来透明背景
上一篇
简易编程代码:如何安装简易 OCR(easy ocr)
下一篇

相关推荐

  • comeandgetyourlove音乐爱就在你身边

    Come and Get Your Love是一首热门的歌曲,由美国摇滚乐队Redbone演唱。这首歌曲于1974年发行,被收录在他们的专辑《Wovoka》中。歌曲以放克曲风为主,旋律活泼,曲调悠扬,歌词朗朗上口,深受歌迷喜爱。…

    2023-06-29 07:47:31
    0 67 13
  • css预编译器: center;}

    CSS预编译器是一种用于构建CSS的工具,它可以将CSS代码转换为更易于管理和维护的格式。它们可以使CSS代码更加灵活,更易于重用,并且可以帮助开发人员更轻松地组织和管理CSS代码。…

    2023-04-30 05:19:08
    0 46 32
  • python中predict函数参数:如何使用Python的predict函数进行机器学习预测

    示例示例predict函数是scikit-learn中的一个函数,用于预测新样本的输出结果。参数:…

    2023-03-30 08:03:12
    0 36 31
  • canvas 官网Bring Your Ideas to Life with Creative Artwork

    Canvas 官网是一个用于创建图形的 HTML5 API,它可以在浏览器中使用 JavaScript 来绘制 2D 图形。它提供了一个可以在网页上绘制图形的强大工具,可以用来创建动画、游戏、数据可视化等。…

    2023-02-28 09:52:08
    0 83 88
  • qt creator快速入门 第3版 pdf从零开始

    Qt Creator快速入门第3版是一本关于Qt Creator的教程书,旨在帮助读者快速掌握Qt Creator的使用。书中介绍了Qt Creator的基本功能,如如何创建项目、编辑代码、调试代码以及创建应用程序等等。书中还提供了一些实例代码,帮助读者更好地理解Qt Creator的用法。…

    2023-05-16 03:03:33
    0 74 14
  • cherry键盘win键不能用:解决Cherry键盘Win键无法使用的措施

    如果您的cherry键盘win键不能用,可能是由于系统设置问题导致的。下面提供一些代码,可以帮助您解决这个问题:打开“控制面板”,然后点击“硬件和声音”,打开“键盘”选项卡。…

    2023-08-27 03:36:33
    0 68 76
  • certificate意思一步一步指南

    示例示例是一种用于证明某个人或机构拥有某种资格或资质的文件。它可以是一种认证,也可以是一种奖励或认可。代码示例:…

    2023-09-14 15:01:58
    0 66 10
  • win10系统ctrl加c不能复制:解决win10系统下Ctrl+C不能复制的问题

    解决方案解决方案答:可能是由于系统快捷键被修改所导致的,可以尝试恢复系统默认快捷键;…

    2023-04-15 00:45:32
    0 35 36

发表评论

登录 后才能评论

评论列表(75条)