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" />

在react文档中：https://reactjs.org/docs/dom-elements.html

Answer 2

您可以使用属性排列运算符：

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

或者你可以查看他们的文档指南

示例：

React一直为DOM提供一个以JavaScript-为中心的API。由于React组件通常同时使用自定义和DOM相关的道具，React使用camelCase约定，就像使用DOMAPI:一样

<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属性类似。