React.js 样式化组件：添加 HTML 属性

Question

所以我们正在使用 styled-components。我想对我们的可访问性做一些工作，需要将 tabindex="0" 作为 HTML 属性添加到其中一些组件。如果不将其作为道具传递，我该怎么做？

例如

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

Answer 1

您可以使用属性展开运算符来做到这一点：

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

或者您可以查看他们的文档 Guide

示例：

React 始终为 DOM 提供以 JavaScript 为中心的 API。由于 React 组件通常采用自定义和 DOM 相关的 props，因此 React 使用驼峰命名法，就像 DOM APIs:

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

Answer 2

您可以将 tabIndex 直接添加到样式化的组件中，它必须是驼峰式： <PlayButton className={className} onClick={handleClick} tabIndex="0" />

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

React.js 样式化组件：添加 HTML 属性

React.js Styled Components : Adding HTML attributes

html

css

reactjs

styled-components