如果我使用Babel命令行預編譯JSX，則React無法正常工作

Question

在我的ui.js ，我有：

const root = const root = document.getElementById('root');

function updateUI(data) {
    var renderData = data.map((i) =>
        <DataItem id={i[0]} value={i[1]} />
    );
    ReactDOM.render(renderData, root);
}

當我使用瀏覽器內的Babel變壓器時，這工作得很好。 但是，在運行npx babel ui.js -o ui-transpiled.js ，它是這樣的：

const root = document.getElementById('root');

function updateUI(data) {
    var renderData = data.map(i => React.createElement(DataItem, { id: i[0], value: i[1] }));
    ReactDOM.render(renderData, root);
}

這不起作用-Chrome控制台說：react-dom.production.min.js：12未捕獲（承諾）錯誤：縮小的React錯誤＃200

但是，如果我換出ReactDOM.render(renderData, root); 到ReactDOM.render(renderData, document.getElementById('root')); ， 有用。 由於某種原因，在文檔頂部定義的恆定root會產生“目標容器不是DOM元素”。 錯誤，但當我使用瀏覽器內Babel時卻沒有。

我究竟做錯了什么？

Answer 1

我想通了（感謝凱利）！

基本上，我的腳本是在頭中加載的，因此const root為空，因為主體尚未加載。