将 Twitch 嵌入式视频与 ReactJS 结合使用

Question

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

这里是 HTML 如何从 Twitch API 文档中嵌入一个 twitch 流：

<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

这个答案非常笼统……只是一种可能的方式……希望这至少能为您指明方向。你可以 post 你尝试实现它的反应代码..我会更新我的答案

要使用它，有三个主要部分。

加载 twitch js 文件
创建元素以将视频嵌入 ID 为 twitch-embed 的案例元素中
调用twitch函数进行初始化和设置

对于 1 您可以在 html 文件中加载 twtich js 文件..主要是 index.html。或者你可以 import 或 require 它......基于你的反应技术堆栈。第二个..你可以在你的组件

中添加<div id=twitch-embed ></div>

第三个..你可以在componentDidMount() React组件的生命周期钩子中调用这个函数。

Answer 2

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

由于 twitch 不为其嵌入的 twitch 提供 npm 包，而您希望能够尽可能 react-like，我创建了一个提供外部 twitch 脚本的元素，将其放在 onComponentMount( ), 然后渲染它。

const EMBED_URL = 'https://embed.twitch.tv/embed/v1.js';

class Hello extends React.Component {
    componentDidMount() {
    let embed;
    const script = document.createElement('script');
    script.setAttribute(
      'src',
      EMBED_URL
    );
    script.addEventListener('load', () => {
      embed = new window.Twitch.Embed(this.props.targetID, { ...this.props });
    });
        document.body.appendChild(script);
  }

  render() {

    return (
        <div>
        Hello {this.props.targetID} {this.props.width} {this.props.height}
        <div id={this.props.targetID}>test</div>
      </div>
    )
  }
}

Hello.defaultProps = {
    targetID: 'twitch-embed',
    width: '940',
  height: '480',
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

将 Twitch 嵌入式视频与 ReactJS 结合使用

Using Twitch Embedded Video with ReactJS

reactjs

twitch