Question

我一直在创建个人项目并尝试使用Twitch Embedded API在我的网页中显示Twitch流和聊天。我对ReactJS有一些经验，但我不知道如何处理这种情况。

以下是如何嵌入来自Twitch API文档的抽搐流的HTML：

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });
    </script>
  </body>
</html>

使用React时实现此目的的最佳方法是什么？

Answer 1

这个答案非常通用......只是一种可能的方式......希望这至少能给你一个方向。你可以在你试图实现它的地方发布你的反应代码。我会更新我的答案

使用它有三个主要部分。

load twitch js file
使用id twitch-embed
调用抽搐功能进行初始化和设置

对于 1 您可以在html文件中加载twtich js文件..主要是index.html。或者你可以import或require ......基于你的反应技术堆栈。第二个..您可以在组件中添加<div id=twitch-embed ></div>

for third ..你可以在反应组件的componentDidMount()生命周期钩子中调用这个函数。

Answer 2

正在运行代码：https://jsfiddle.net/tadachi/7jzfnw99/8/

由于twitch没有为他们的抽搐嵌入提供npm包，并且你希望能够尽可能像反应一样，我创建了一个提供外部抽搐脚本的元素，将它放在onComponentMount（）中，然后渲染它

<property name="org.uberfire.nio.git.ssh.algorithm" value="RSA"/

使用带有ReactJS的Twitch嵌入式视频

2 个答案: