如何防止选项卡导航专注于自定义 React 组件？

编程问答 2022-05-16

问题描述

我找到的所有阻止标签导航到某个 DOM 元素的答案都是在标签中添加一个 tabIndex="-1"。

这一切都很好。

但是，我使用的是自定义 React 组件（特别是，我使用的是 react-lottie 包）。

import React from 'react'
import Lottie from 'react-lottie'

const MyComponent = () => {
    return (
        <section>
            <h1>A great section</h1>
            <div>Some stuff here</div>
            <a href="https://www.google.com">Some links here</a>

            <div class="animation-wrapper" tabIndex={-1}>
                <Lottie style={styles} options={options} />
            </div>
        </section>
    )
}

正如您从上面的代码段中看到的，我试图阻止选项卡导航击中 Lottie 动画。但是，包装 tabIndex={-1} 和/或 div 标签本身上的 Lottie 不会导致任何更改。标签导航仍然停留在动画上。

任何想法将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lottielottiereactjsreactjsreactjsreactjs