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未捕获（在承诺中）错误：缩小反应错误＃200

但是，如果我将ReactDOM.render(renderData, root);换成ReactDOM.render(renderData, document.getElementById('root'));，则可行。出于某种原因，在文档顶部定义的常量root生成“目标容器不是DOM元素”。错误，但不是在我使用浏览器中的Babel时。

我做错了什么？

Answer 1

我想通了（谢谢卡利）！

基本上，我的脚本被加载到头部，因此const root为空，因为身体还没有加载。

如果我使用Babel命令行

1 个答案: