时间戳

首页 > 解决方案 > 如何在 React 组件中嵌入 Twitch 对象而不在每次渲染时调用 New？

reactjs - 如何在 React 组件中嵌入 Twitch 对象而不在每次渲染时调用 New？

问题描述

我的组件具有渲染我们的 Twitch 嵌入的功能。我试图了解如何在每次呈现组件时重新使用创建的 Twitch.Embed 而不调用 New 。

以下是 Twitch 提供的用于创建嵌入的代码：

    <div id="twitch-embed"></div>

    new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat",
        // Only needed if this page is going to be embedded on other websites
        parent: ["embed.example.com", "othersite.example.com"]
      });

标签： reactjsrenderembedreusabilitytwitch

解决方案

最简单的方法是创建 Twitch 对象，使用 Component body 中的“new”：

const twitchObj = new Twitch.embed({ id: "twitch-embed", .... });

const Component = () => { return (<div id="twitch-embed"></div>); }

甚至您可以创建单独的文件，该文件将为创建带有所需参数的 Twitch 对象提供构造函数（并且可能带有一些默认值来创建预定义的对象），然后您将能够导入它并在您需要的任何地方创建 Twitch 对象。

推荐阅读