如何为 React 类（ES6）设置显示名称？

Posted 2023-02-22

【中文标题】如何为 React 类（ES6）设置显示名称？

【英文标题】：How to set display name for a React class (ES6)?

【发布时间】：2020-08-03 05:57:55

【问题描述】：

我已经尝试了几种方法来设置我的 React 组件的显示名称，但没有一个奏效： 我尝试将它设置为这样的公共静态变量：

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

但是 eslint 仍然给我这个错误：

error Component definition is missing display name react/display-name

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

class Base extends React.Component<any, any>
    constructor(props)
        ...
    
    render()
        ...
    

Base.displayName = "Base";

我最终得到一个错误提示：

Property 'displayName' does not exist on type 'typeof Base'.

我尝试了与其他 *** 帖子不同的方法，但我似乎无法摆脱错误。我该如何解决这个问题？请帮忙。

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

【问题讨论】：

我不认为这个错误来自那些例子，请制作一个可生产的：How to create a Minimal, Reproducible Example

"Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component."

Base.name 也许可以工作？

@BlackHole 那也行不通。给出错误“typeof Base”类型上不存在属性“名称”。

@avhhh 好的，在 javascript 中你可以使用 Object 方法获取类名，但它不起作用我不知道

【参考方案1】：

而不是使用public static displayName = "Base";删除公共并像static displayName = "Base";一样使用它

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

【讨论】：

eslint 在此更改后给了我两个错误：Missing accessibility modifier on class property displayName @typescript-eslint/explicit-member-accessibility 和 Component definition is missing display name react/display-name

禁用.eslintrc文件中的规则

【参考方案2】：

你在用this ESLint plugin我接受吗？

在这种情况下，您是否将ignoreTranspilerName 选项设置为true？如果是这样，那可能是您的问题。

如果您已经为组件命名，为什么还要制定这条规则？转译器默认使用类名作为组件名

【讨论】：

我还是个新手，但是你会在哪里设置这个规则更改？

你的 .eslintrc 文件，见eslint.org/docs/user-guide/configuring

【参考方案3】：

在这里回答我自己的问题。事实证明，问题出在与我最初想象的不同的领域。 eslint 错误 Component definition is missing display name react/display-name 指出我使用匿名函数返回 React 组件：

export function renderForm()
    return 
        react: () => <Base />
    

我以为是说<Base/> 需要一个显示名称，但后来发现问题出在未命名的函数上。我通过命名该函数来解决它：

export function renderForm()
    return 
        react: function renderComponent() return <Base />
    

不确定这是否对其他人有帮助，但 eslint 错误现在消失了！

编辑：更改规则，如其他两个答案所述，也是一个有效的解决方案，仅供参考