使用样式化组件使元素可选项卡答案

【问题标题】：Making an element tabbable with Styled Components使用样式化组件使元素可选项卡
【发布时间】：2020-01-02 13:50:10
【问题描述】：

我希望人们能够通过标签“关注”我的 div。到目前为止，我试过这个：

const Div = styled.div.attrs({
  tabindex: '0',
})`
  margin: auto;
  width: 100%;
  max-width: 1200px;
  height: 320px;
  background: url(${({ rtl }) => determineUrl(rtl)}) no-repeat center;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  @media (min-width: ${resolutions.min.mobile}px) and (max-width: ${resolutions.max.mobile}px){
    max-height: 240px;
  }
`;

还有这个：

<Div tabindex={0}>...</Div>

还有

<Div tabindex={"0"}>...</Div>

这些都不行，想不出别的了。

【问题讨论】：

标签： javascript html reactjs styled-components

【解决方案1】：

tabindex 在 React 中不是有效的属性名称，它应该是 tabIndex 并且它只接受数字作为值，所以 tabIndex={0} 应该为你解决问题

【讨论】：