时间戳

首页 > 解决方案 > 如何在我的 html 文件中显示 es6 组件？

javascript - 如何在我的 html 文件中显示 es6 组件？

问题描述

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

这是我的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 和所有其他东西。

我该怎么做才能让它发挥作用？

标签： javascriptreactjsecmascript-6ecmascript-5

解决方案

看起来您缺少 React DOM 的导入语句，因为您需要它来将组件从 React 渲染到 DOM，除非您从单独的文件中导入这些组件。

import ReactDOM from "react-dom"

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

推荐阅读