javascript - 如何设置 React 类(ES6)的显示名称?

标签 javascript reactjs typescript ecmascript-6

我尝试了多种方法来设置我的 React 组件的显示名称,但没有一个有效: 我尝试将其设置为公共(public)静态变量,如下所示:

class Base extends React.Component<any, any>{
    public static displayName = "Base";
    constructor(props){
        ...
    }
    render(){
        ...
    }
}

但是 eslint 仍然抛出这个错误:

错误组件定义缺少显示名称react/display-name

我尝试了另一种方法,将其设置在类定义之外:

class Base extends React.Component<any, any>{
    constructor(props){
        ...
    }
    render(){
        ...
    }
}
Base.displayName = "Base";

我最终收到一条错误消息:

类型“typeof Base”上不存在属性“displayName”。

我尝试了其他 Stackoverflow 帖子中的不同方法,但似乎无法消除该错误。我该如何解决这个问题?请帮忙。

编辑:在下面回答了我自己的问题。这个问题的核心似乎是关于匿名函数而不是 React 类。

最佳答案

不要使用 public static displayName = "Base"; 删除 public 并像 static displayName = "Base"; 一样使用它

class Base extends React.Component<any, any>{
    static displayName = "Base";
    constructor(props){
        ...
    }
    render(){
        ...
    }
}

关于javascript - 如何设置 React 类(ES6)的显示名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61327425/

相关文章:

javascript - 如何在javascript中将一个类的属性复制到另一个类,包括方法

javascript - 如何在 Greasemonkey 中使用 javascript 重定向某些页面?

javascript - 使用phonegap将文件下载到下载文件夹ios/android

javascript - React 是否删除显示为 :none from DOM? 的节点

typescript - Bazel 抛出 "Module ts-jest in the transform option was not found"的 Jest 测试

javascript - 在 dom 中移动 div 的最快方法是什么?

javascript - 这太硬编码了吗?

reactjs - 带reactjs的Material-UI : How to use or implement breadcrumbs

node.js - 如何获取 typescript 文件的路径,而不是编译后的 JavaScript?

typescript - 在 Webpack 5 : SyntaxError: Cannot use import statement outside a module 中用 Typescript 编写的 Web Worker