当前位置: 首页 > 知识库问答 >
问题:

“调用”返回JSX的函数(编写在类组件中)的正确方法是什么?

仲孙雅达
2023-03-14

我在类组件中编写了一个返回一些JSX的函数,如下所示:

    billingPendingMarker = () => {
        const { classes } = this.props;
        return (
            <svg className={classes.marker} height="50px" width="8px">
                <rect x="0" width="8" height="50" rx="4" fill={color.reds[300]} />
            </svg>
        )
    }

在我的类组件的main render方法中,我“调用”了这个函数,就好像我在写JSX一样:

<this.billingPendingMarker />

虽然这在本地没有问题,但是在将一个构建部署到一个临时环境时,我得到了以下错误:https://reactjs.org/docs/error-decoder.html/?args[]=未定义

当我更改时

我最初的怀疑是在构建过程中代码被缩减时出现了问题,但我不确定。

我知道这不是最好的“设计”实践,但是我更怀疑语法的正确性。

感谢任何帮助我理解这一点!


共有1个答案

伍成仁
2023-03-14

首先,您必须现在,该组件首先需要有一个大写字母,才能被React视为大写字母。查看此帖子以获取信息:

ReactJS组件名称必须以大写字母开头?

这可能就是类组件中的组件没有呈现的原因。此外,您不必使用它,只需

一般来说,很少有人建议在组件中创建组件。这违背了可重用性和可组合性。类组件中的功能组件是可以接受的,但不要在功能组件中创建功能组件。

另一方面,让一个函数返回一些JSX是完全可以的。调用{this.billingPendingMarker()}来渲染所需的JSX完全没有问题。但是在这种情况下,您的billingPendingMarker不被视为React组件,只是一个返回JSX但没有随附的组件“包和功能”的函数。

 类似资料:
  • 问题内容: 我在一些帖子中看到人们在编写动态HTML时不喜欢在javascript中使用。 为什么是这样?什么是 正确的 方法是什么? 问题答案: 仅在最初解析页面和创建DOM时才起作用。浏览器到达结束标记并且DOM准备就绪后,就不能再使用了。 我不会说使用是正确的还是不正确的,这仅取决于您的情况。在某些情况下,您只需要完成任务即可。查看如何将Google Analytics(分析)注入大多数网站

  • 您可以看到,我正在将“that”作为参数传递给PrintInfo。如果没有“that”参数,“info”将打印为“undefined”。像下面的例子一样,当从“子类”的对象调用此函数时,“this.info”是未定义的。 如何在javascript中重写和调用超类的方法,使函数能够访问类的实例变量?

  • 因此,作为家庭作业,我的任务是编写包含5种静态方法的代码。其中两人要求提供以下内容: “编写一个以整数X为参数的方法,如果X为偶数,则返回true;如果X为奇数,则返回false。” 和 “编写一个以正整数N为参数的方法,如果N是素数,则返回true,否则返回false。假设N 我不清楚我是否需要打印出正确或错误的方法。在我将println添加到方法调用之前,它们显然没有打印。所以我想我有两个问题

  • 以下是mongodb中的集合 当我询问 MongoDB返回结果集中具有"拥有":"笔记本电脑"的文档。 当我询问 结果仅显示数据字段中第一个匹配“TV”的文档 我如何查询获得汤姆拥有电视的所有3个文档,不包括笔记本电脑文档。预期结果 注意:在本例中,我只提到了数据字段中的4个文档,其中原始集合有50多个文档。对不起,我的英语很差:)。

  • 本文向大家介绍什么是方法的返回值?返回值在类的方法里的作用是什么?相关面试题,主要包含被问及什么是方法的返回值?返回值在类的方法里的作用是什么?时的应答技巧和注意事项,需要的朋友参考一下 方法的返回值是指我们获取到的某个方法体中的代码执行后产生的结果!(前提是该方法可能产生结果)。 返回值的作用: 接收出结果,使得它可以用于其他的操作!

  • 我想使用OpenCV对现有HDR图像执行算术运算,然后在中写入HDR文件。hdr格式。算术运算对这个问题并不重要,所以让我们假设我想读一个。hdr文件,然后将其写入相同的格式。 我尝试用通常的方法,首先读取hdr文件 然后写为 我使用Mac的Finder和OpenHDRViewer来查看HDR图像。当我运行上述代码时,Mac finder能够正确地显示文件。但是当我尝试使用OpenHDRViewe