Question

因此，在上一篇文章（here）中，我提到在浏览我的react元素时遇到问题。因此，我发现问题在于我所有的react组件都包装在<span>标记中，当用户使用标记按钮进行导航时，这些输入字段（我的复选框和单选按钮）将被跳过。 / p>

这是检查器内部的外观

<span class="jss29 jss226 jss277 jss271 jss265 jss276" tabindex="0">
    <span class="jss231">
        <svg class="jss168" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
            <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
        </svg><input class="jss280" name="ChkBox" type="checkbox" data-indeterminate="false" value=""></span><span class="jss64">
    </span>
</span>

如果我将属性tabindex=0添加到根<span>标记中，则可以得到所需的正确行为。但是，我对根范围标记没有任何控制权，因为它是在我的react组件被渲染时生成的

有没有办法向包裹反应组件的<span>标签添加属性？

感谢您的帮助！

Answer 1

使用类似<Checkbox tabIndex="0" />的名称。参见React Documentation。而且，如果要将属性添加到父节点，则必须使用类似的内容；

export default class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    const node = this.myRef.current;
    node.parentNode.parentNode.setAttribute("tabindex", "0")
  }
  render() {
    return <Checkbox inputRef={this.myRef} />;
  }
}

是否可以将属性添加到包裹我的react组件的span标签？

1 个答案: