Question

我想在我的html文件中显示Root组件。我知道如何使用es5和ReactDOM.render(<Root/>, document.getElementById('app'))来做，但是es6呢？

这是我的html文件：

<div id="app"></div>

这是我的js文件：

import React, { Component } from 'react';

class Root extends Component {
    render() {
        return(
            <div>
                <h1>Testing</h1>
            </div>
        );
    }
}

ReactDOM.render(<Root/>, document.getElementById('app'));

我在es5之上的尝试是因为我不太确定如何在es6中做到这一点，这显然是行不通的。

注意：我的项目没有使用create-react-app。我只是在create-react-app环境之外尝试尝试，而在其他环境中尝试尝试。我手动安装了Babel和所有其他东西。

我该怎么做才能使其正常工作？

Answer 1

看起来您缺少React DOM的import语句，因为除非从单独的文件中导入那些组件，否则您需要它来将组件从React呈现到DOM。

import ReactDOM from "react-dom"

在您的第一个导入语句之后添加它。

如何在html文件中显示es6组件？

1 个答案: