代码之家 › 专栏 › 技术社区 › Suhail Gupta

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

parceljs reactjs javascript

0

Suhail Gupta · 技术社区 · 4 年前

我想使用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 ? 我也查过了 文档.正文

2 回复 | 直到 4 年前

1

pixelearth 4 年前

首先,我不确定在bundle中包含直接影响页面的代码是否是个好主意。

我对为什么会发生这种情况的猜测是,它与包在页面中加载的时间有关。在里面吗 head ? 如果是的话 document.body

如果要使用与文档准备就绪相关联的事件,那么最好是这样做。

根据您的需要,这可能会变得复杂,但是如果您可以访问jQuery,则可以使用 .ready()

如果没有,你可以用 various vanilla js options .

2

0

Amadou Beye 4 年前

https://jsfiddle.net/rL6dnhps

(function() {
    // the DOM will be available here
    ReactDOM.render(<App />,         
    document.body.appendChild(document.createElement("div")));
})();