web-dev-qa-db-ja.com

「イベントハンドラーを含む静的HTML要素にはロールが必要です」を修正する方法？

私のreactjs styledcomponentには次のコードが含まれています。

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

これは正常に機能しますが、eslintは不満を言っています。

Static HTML elements with event handlers require a role.

このエラーを修正するにはどうすればよいですか？

reactjseslintstyled-componentsprettier
10
bier hier

この警告を回避するには、タグにロールプロップを追加する必要があります（ボタンなど）。

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

アンカータグにHREFの小道具が欠落しているためだと思います（わかりません）

13
Jerome

ロールを明示的に設定する必要があります。だから、次のコードを試してください：

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

また、ご覧のとおり、onClickハンドラーを変更して、通常の宣言で矢印関数を置き換えました。煩わしくて高価な計算を減らすでしょう。

2
Sviat Kuzhelev