在 React 中释放 Web 组件的力量
在 React 中释放 Web 组件的力量
假设您有一个项目，要求您在 React 应用程序中使用 Web 组件。你如何使用该组件的状态？如何访问它的方法和属性？
在这篇文章中，我将向您介绍如何使用钩子来释放 React 中 Web 组件的强大功能。我在示例中使用了自定义视频播放器，因此我可以演示如何访问元素的影子根，但此方法应该适用于大多数类型的 Web 组件。
导入网页组件
首先，我们需要将 Web 组件导入到我们的应用程序中。在我的例子中，我使用脚本来引入组件，然后使用它来定义一个名为 custom-player 的自定义元素：
因为我使用的是 TypeScript，所以自定义元素会抛出错误： JSX.IntrinsicElements 类型上不存在属性“custom-player”。
为了解决这个错误，我们需要将此代码添加到文件顶部：
创建状态
接下来，我们需要为自定义播放器、它的影子根和 isPlaying 创建一些状态，以便我们可以控制元素的行为：
创建回调参考
现在我们将创建一个回调引用，以便我们可以访问我们需要的道具和方法。
我们可以在这里使用查询选择器，例如： document.getElementsByTagName("custom-player")[0];
但这可能会在 React 中产生问题，因为它修改 DOM 的方式，所以 refs 是一个更可靠的解决方案。我们还需要具备观察和响应 DOM 变化的能力。因为回调 ref 自己观察这些变化，它允许我们做我们需要做的事情，而不需要更复杂的东西，比如带有 Mutation Observer 的 useEffect 钩子。
注意这里的依赖数组。如果我们不注意这两个状态的变化，我们的影子根将在页面加载时未定义。这是因为由于钩子的异步特性，阴影根不会在第一次渲染时添加到状态中。
接下来，我们需要将自定义播放器添加到我们的应用程序中，并将我们的回调 ref 作为它的 ref：
创建处理程序
现在我们的组件已添加到我们的应用程序并且我们的状态已准备就绪，让我们创建一些可以与我们自己的控制栏一起使用的简单处理程序：
实现控制栏
剩下的就是实现我们的控制栏，这样我们就可以直接修改 Web 组件的影子根的行为：
干得好！这是我们整个 App.tsx 文件现在的样子：
现在我们可以采用这个模式并在它之上构建，通过 reducer、上下文和所有其他 React 必须提供的很酷的东西来扩展这个 Web 组件的使用。
如果您想查看整个示例，请查看 GitHub 仓库 .
结论
在这篇文章中，我向您介绍了如何通过使用回调 ref 和一些状态来访问我们自定义播放器的影子根，从而释放 React 中 Web 组件的强大功能。
我希望你觉得这对你有帮助，我期待在下一个与大家见面
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
