[英]Execute external script in react
我正在尝试在我的Gatsby / react(16.8.6)网站上集成podigee播客播放器( https://github.com/podigee/podigee-podcast-player )。
在我的componentDidMount()
加载外部脚本可以正常工作。 这是组件:
import React, { Component } from "react";
export default class extends Component {
componentDidMount() {
const PlayerConfiguration = {
episode: {
media: {
https: "https://testing.podigee.io/1-neue-episode.mp3",
m4a: "https://testing.podigee.io/1-neue-episode.m4a",
ogg: "https://testing.podigee.io/1-neue-episode.ogg",
mp3: "https://testing.podigee.io/1-neue-episode.mp3",
opus: "https://testing.podigee.io/1-neue-episode.opus"
},
title: "Neue Episode"
}
};
const script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js";
script.setAttribute("data-configuration", { PlayerConfiguration });
document.body.appendChild(script);
}
render() {
return (
<div>
<div id="player">
<h2>Playercomponent</h2>
</div>
</div>
);
}
}
但是,脚本不会像预期那样运行并创建iframe。 脚本加载后如何实际执行? 它是IIFE的一大组成部分,所以它不应该自己运行吗?
!function t(e, i, n) {
function r(s, a) {
if (!i[s]) {...
完整的脚本可以在这里找到:“ https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js ”
关于codeandox的示例: https ://codesandbox.io/s/podigee-script-tag-in-react-87ud8 ? fontsize =14
如果有人能指出正确的方向,我将非常感激!
看看阵营负载脚本- https://www.npmjs.com/package/react-load-script
import Script from 'react-load-script'
...
render() {
return (
<Script
url="https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js"
onCreate={this.handleScriptCreate.bind(this)}
onError={this.handleScriptError.bind(this)}
onLoad={this.handleScriptLoad.bind(this)}
/>
)
}
Podigee的支持足以帮助我并提供示例。 因此,对于任何遇到以下问题的人来说,要回答我自己的问题:关键要点是配置应为JSON,而不应作为对象传递给react。
return JSON.stringify({
episode: {
media: {
mp3: "..."
}
}
});
一个有效的示例可以在这里找到: https : //codesandbox.io/embed/podigee-player-in-react-87ud8
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.