Posted at

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