Reactで外部scriptを読み込むコンポーネント

reactでscriptタグをrender中に書いても表示してくれない。

componentDidMountで手動でDOM操作すれば良さげ。
Reactで外部Scriptを動的に読み込む
Adding script tag to React/JSX

コンポーネント作るたびにDOM操作を書くのも面倒なので、scriptタグ設置用のコンポーネントクラスを定義

import {Component} from "react";
import React from "react";
import {PropTypes} from "prop-types";

const id = Math.random().toString();

class ScriptTag extends Component {
    componentDidMount() {
        const {src, async} = this.props;
        const script = document.createElement("script");

        script.src = src;
        script.async = async || false;

        document.getElementById(id).replaceWith(script)
    }

    render() {
        return <div id={id}/>
    }
}

ScriptTag.propTypes = {
    src: PropTypes.string.isRequired,
    async: PropTypes.bool
};

export default ScriptTag