在react中执行外部脚本

Question

I am trying to integrate the podigee podcast player ( https://github.com/podigee/podigee-podcast-player ) on my Gatsby/react (16.8.6) site.

Loading the external script in my in componentDidMount() works fine. Here is the component:

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>
    );
  }
}

However, the script never runs and creates an iframe as it is supposed to. How do I actually execute the script once it is loaded? It is one big IIFE so shouldn't it run by itself?

!function t(e, i, n) {
function r(s, a) {
    if (!i[s]) {...

The full script can be found here: " https://cdn.podigee.com/podcast-player/javascripts/podigee-podcast-player.js "

Example on codesandox: https://codesandbox.io/s/podigee-script-tag-in-react-87ud8?fontsize=14

If some could point me in the right direction I would be very thankful!

Answer 1

Look into React Load Script - 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)}
    />
  )
}

Answer 2

The Podigee support was kind enough to help me out and provide an example. So to answer my own question for anyone struggling with something like this: The key takeaway was that the configuration should be JSON and not passed as an object in react.

return JSON.stringify({
    episode: { 
        media: {
            mp3: "..."
        }
    }
});

A working example can be found here: https://codesandbox.io/embed/podigee-player-in-react-87ud8