"call" 函数的正确方法是什么 - 写在 class 组件内 - returns JSX？

Question

我在 class 组件中写了一个 returns 一些 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>
        )
    }

在我的 class 组件的主要渲染方法中，我“调用”了这个函数，就像我在编写 JSX 一样：

<this.billingPendingMarker />

虽然这在本地没有问题，但在将构建部署到暂存环境时，我收到以下错误：https://reactjs.org/docs/error-decoder.html/?args%5B%5D=undefined&args%5B%5D=&invariant=130

当我将 <this.billingPendingMarker /> 更改为 this.billingPendingMarker() 时，我的代码运行良好。我想不通的是，为什么编写“JSX 表单”会导致页面崩溃？实际上，我们不是在创建一个 功能组件 封装在我们的主要 class 组件中吗？

我最初怀疑是在构建过程中缩小代码时出现问题，但我不确定。

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

感谢任何帮助我理解这一点的人！

Answer 1

首先，您现在必须知道，组件需要先有一个大写字母才能被 React 视为大写字母。检查此 post 以获取信息：

这可能就是 class 组件内的组件未呈现的原因。另外，您不必使用它，而只能使用 <BillingPendingMarker />

一般来说，很少建议在组件内部创建组件。它违背了可重用性和可组合性。 class 组件内的功能组件是可以接受的，但不要在功能组件内做功能组件。

另一方面，return使用一些 JSX 的功能完全没问题。调用 {this.billingPendingMarker()} 以呈现所需的 JSX 完全没有问题。但是在这种情况下，您的 billingPendingMarker 不被视为 React 组件，只是 return JSX 的函数，但没有随附的组件“包和功能”。

"call" 函数的正确方法是什么 - 写在 class 组件内 - returns JSX？

What is the correct way to "call" a function - written inside a class component - that returns JSX?

javascript

jsx

reactjs