首页 > 解决方案 > 无法向网页添加反应

问题描述

我正在尝试将 React js 添加到基本网页。这是文件结构:

////
├─index.html
└─js/
  ├─Page.js
  └─index.js

index.html

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="js/index.js" type="text/babel"> </script>
</body>

index.js

import ReactDOM from 'react-dom';
import Page from './Page';

ReactDOM.render(<Page />, document.getElementById('root'));

Page.js

import {Component} from 'react'

class Page extends Component {
    render() {
        return (
            <h1>Hello World!</h1>
        )
    }
}

export default Page;

出于某种原因Hello World,我打开时没有出现在页面上index.html。如何修复此页面?

标签: htmljavascriptweb

解决方案


在您的组件中,index.js您应该import React使用 Babel 转换为React.createElement('h1', null, 'hello world')


推荐阅读