Как установить отображаемое имя для класса React (ES6)?

Question

Я пробовал несколько способов установки отображаемого имени для моего компонента React, но ни один из них не сработал: я попытался установить его как переменную c stati c, например:

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'.

Я пробовал другие методы из других сообщений Stackoverflow, но не могу избавиться от этой ошибки. Как я могу решить это? Пожалуйста, помогите.

изменить: ответил на мой собственный вопрос ниже. Суть этой проблемы, по-видимому, касалась анонимных функций, а не класса React.

Answer 1

Вместо использования public static displayName = "Base"; удалите publi c и используйте его как static displayName = "Base";

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

Answer 2

Отвечая на мой собственный вопрос здесь. Оказалось, что проблема лежит в другой области, чем я думал. Ошибка eslint Component definition is missing display name react/display-name была указана, когда я использовал анонимную функцию для возврата компонента React:

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

Я думал, что это говорит о том, что <Base/> нужен displayName, но оказалось, что проблема это безымянная функция. Я решил это, назвав эту функцию:

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

Не уверен, поможет ли это кому-нибудь еще, но ошибка eslint теперь исчезла!

edit: изменение правила, как упомянуто из два других ответа также является допустимым решением FYI

Answer 3

Вы используете этот плагин ESLint Я так понимаю?

В этом случае вы установили ignoreTranspilerName для true? Если это так, это может быть вашей проблемой.

Зачем вообще иметь это правило, если у вас уже есть имена для вашего компонента? Транспортер должен использовать имя класса в качестве имени компонента по умолчанию