javascript - React - 模板未注入 HTML 页面
问题描述
我在一个/public/index.html
文件中有以下内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Foobar/title>
</head>
<body>
<div id='app'></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
我有一个 React 模板,/src/app.js
包含以下内容:
'use strict';
console.log("Indecision application is running...");
var appRoot = document.getElementById('app');
var template = React.createElement(
'h1',
null,
'Testing'
);
ReactDom.render(template, appRoot);
我用 Babel 做了一点改造:
babel src/app.js --out-file=public/scripts/app.js --presets="env,react"
我的页面返回空白(请参阅帖子末尾的来源)。我的模板中的内容没有注入 HTML 页面。我看不出问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Foobar</title>
</head>
<body>
<div id='app'></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
<!-- Code injected by live-server -->
<script type="text/javascript">
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function() {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
head.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
head.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function(msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
console.log('Live reload enabled.');
})();
}
// ]]>
</script>
</body>
</html>
解决方案
推荐阅读
- javascript - 正则表达式模式不会整理 YouTube 网址
- openssl - (带有 ECDSA 证书的 TLS)握手失败,因为没有共享密码
- node.js - 使用 react + nodejs 上传图片
- xml - 使用 DataContractSerializer 的接口中的显式类型
- sql - sql server如何查询最后一件商品的售出日期
- prolog - 如何在prolog中将相同的变量绑定在一起
- php - WooCommerce 自定义结帐复选框字段验证一个必填复选框
- php - PHP FPM + nginx 日志记录
- python - 为什么我们需要在多维标签的情况下划分损失?
- javascript - 如何使用角度一次从firebase读取和更新多个文档