How to fix 'Static HTML elements with event handlers require a role.'?

问题

My reactjs styledcomponent contains this code:

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

This works fine but the eslint is complaining:

Static HTML elements with event handlers require a role.

How can I fix this error?

回答1:

you need to add a role props in your a tag to avoid this warning, for example a button

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

I guess it is because the HREF props is missing in your anchor tag (not sure)

回答2:

You need to set the role explicitly. So, try the next code:

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

Also, as you can see I've modified the onClick handler by replacing arrow function on regular declaration. It would reduce annoying and expensive calculations.

来源：https://stackoverflow.com/questions/54274473/how-to-fix-static-html-elements-with-event-handlers-require-a-role