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相关的道具，因此React就像DOM API一样使用camelCase约定：

<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直接添加到仅需驼色的样式化组件中： List

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

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

2 个答案: