javascript - How to set display name for a React class (ES6)? - Stack Overflow

admin管理员组

文章数量:1399509

I've tried several methods in setting the display name for my React Component, but none has worked: I tried to set it as a public static variable like this:

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

But eslint still throws me this error:

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

I tried an alternative approach where I set it outside the class definition:

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

And I end up getting an error saying:

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

I've tried different methods from other Stackoverflow posts but I can't seem to get rid of the error. How can I resolve this? Please help.

edit: answered my own question below. The core of this problem seemed to be regarding anonymous functions rather than the React class.

I've tried several methods in setting the display name for my React Component, but none has worked: I tried to set it as a public static variable like this:

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

But eslint still throws me this error:

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

I tried an alternative approach where I set it outside the class definition:

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

And I end up getting an error saying:

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

I've tried different methods from other Stackoverflow posts but I can't seem to get rid of the error. How can I resolve this? Please help.

edit: answered my own question below. The core of this problem seemed to be regarding anonymous functions rather than the React class.

• javascript
• reactjs
• typescript
• ecmascript-6

Share Improve this question Follow edited Apr 20, 2020 at 17:46 avhhh asked Apr 20, 2020 at 16:31 avhhhavhhh 27111 gold badge55 silver badges1818 bronze badges 6

• I don't think this error es from those examples, please make a producible one: How to create a Minimal, Reproducible Example – Dennis Vash Commented Apr 20, 2020 at 16:36
• "Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the ponent." – jonrsharpe Commented Apr 20, 2020 at 16:37
• Base.name maybe could work? – Black Hole Commented Apr 20, 2020 at 16:38
• @BlackHole That also does not work. Gives the error Property 'name' does not exist on type 'typeof Base'. – avhhh Commented Apr 20, 2020 at 16:47
• @avhhh Allright, in javascript you can get the class name with Object methods, but it dont work i dont know – Black Hole Commented Apr 20, 2020 at 16:50

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

Instead of using public static displayName = "Base"; remove public and use it like static displayName = "Base";

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

Answering my own question here. It turned out that the problem lies in a different area than I had originally thought. The eslint error Component definition is missing display name react/display-name was indicated where I used an anonymous function to return the React Component:

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

I thought that it was saying that <Base/> needed a displayName, but it turned out that the problem is the unnamed function. I resolved it by naming that function:

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

Not sure if this will help anyone else, but the eslint error is now gone!

edit: changing the rule, as mentioned from the other two answers is also a valid solution fyi

You are using this ESLint plugin I take it?

In that case, did you set ignoreTranspilerName option to true? If so, that could be your issue.

Why even have this rule if you already have names for your ponent? The transpiler should use the class name as the ponent name by default

本文标签： javascriptHow to set display name for a React class (ES6)Stack Overflow