Как исправить «Статические HTML-элементы с обработчиками событий требуют роли.»?

Question

Мой стиль в стиле реагирования содержит этот код:

<a styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

Это нормально работает, но eslint жалуется:

Static HTML elements with event handlers require a role.

Как я могу исправить эту ошибку?

Answer 1

Вам необходимо установить роль явно.Итак, попробуйте следующий код:

<a role="button" styling="link" onClick={this.gotoLink}>
  <SomeComponent /> 
</a>

Также, как вы можете видеть, я изменил обработчик onClick, заменив функцию стрелки в регулярном объявлении.Это уменьшит раздражающие и дорогие вычисления.

Answer 2

вам нужно добавить ролевые реквизиты в ваш тег, чтобы избежать этого предупреждения, например, кнопку

<a role = "button" styling="link" onClick={() => this.gotoLink()}>
  <SomeComponent /> 
</a>

Я думаю, это потому, что реквизиты HREF отсутствуют в вашем теге привязки (не уверен)