动态创建react应用程序挂载的元素

我想使用react创建一个javascript应用程序的构建,它目前只是一个定义如下的单个文件。它只会创建一个 div 不断地改变颜色 hello-world 安装后的文本。

import * as React from "react";
import * as ReactDOM from "react-dom";

class App extends React.Component {
    componentDidMount() {
        const colorBox = ["red","blue","green"];
        const element = document.getElementById("my-div");
        setInterval(() => {
            element.style.color = colorBox[parseInt(Math.floor(Math.random() * colorBox.length))];
        }, 3000);
    }

    render() {
        return (
            <div id={"my-div"}>
                Hello, World.
            </div>
        );
    }
}

ReactDOM.render(<App />,         
    document.body.appendChild(document.createElement("div")));

parcel js 作为捆绑工。我把我的javascript绑定为 parcel build index.js dist 文件夹。到目前为止,还不错。但是现在,我用我网站上的脚本标记加载这个javascript:

<script type="text/javascript" src="https://mycdn.com/bundle.index.js"></script>

它抛出一个错误

    index.js:16 Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.parcelRequire.Focm.react (index.js:16)
    at f (index.js:1)
    at parcelRequire.YOwE (index.js:1)
    at index.js:1

appendChild 属于 document.body ? 我也查过了 文档.正文