Стилизованные компоненты React.js: добавление атрибутов HTML

Question

Итак, мы используем styled-components.Я хочу поработать над нашей доступностью, и мне нужно добавить tabindex="0" в качестве атрибута HTML для некоторых из этих компонентов.Как я могу сделать это, не передавая его в качестве реквизита?

например

<PlayButton className={className} onClick={handleClick} tabindex="0">

Answer 1

Вы можете добавить tabIndex прямо к стилизованному компоненту, он просто должен быть camelCase: <PlayButton className={className} onClick={handleClick} tabIndex="0" />

в реагирующих документах: https://reactjs.org/docs/dom-elements.html

Answer 2

Вы можете сделать это с помощью оператора распространения атрибута:

let props = condition ? {tabIndex: 1} : {};
let div = <div {...props} />

или проверить их документацию Руководство

Пример:

React всегда предоставлял DOM-ориентированный API для DOM.Поскольку компоненты React часто используют как пользовательские, так и связанные с DOM реквизиты, React использует соглашение camelCase, как и API DOM:

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

Эти реквизиты работают аналогично соответствующим атрибутам HTML, за исключением особых случаев.задокументировано выше.