html - 无法向网页添加反应
问题描述
我正在尝试将 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
。如何修复此页面?
解决方案
在您的组件中,index.js
您应该import React
使用 Babel 转换为React.createElement('h1', null, 'hello world')
推荐阅读
- c# - 如何在 C# 中从具有多个返回的存储过程中获取剩余输出
- postgresql - 获取每个员工的最大记录时间
- android - Android 如何使用 ViewOutlineProvider 显示圆形阴影?
- reactjs - 我正在尝试在 react.js 中构建一个垂直鼠标滚轮控制滑动器,但它不起作用?
- android - HTTPS 连接在 Staging 中的 Android 应用程序上不起作用,但在生产中工作
- python - 根据特定的元组值删除列表中的元素
- c# - 迭代枚举元素(不仅仅是名称,而不仅仅是值)
- filtering - 连续数字过滤
- python-3.x - 如何连接两个数据帧并仅保留出现在两个数据帧中的那些数据行,然后使用索引作为 ylabel 创建直方图
- parameters - 使用@Param 时,Nestjs 验证管道无法按预期工作