未被调用的React代码-- React的基本原理
未被调用的React代码-- React的基本原理
提问于 2018-11-28 05:36:26
第9行中的div id没有被调用。输出不显示在reactDom.render函数下调用的文本。它只打印第10行的“HTML中的索引表单中的Hello”。我遗漏了什么？
使用快速web服务器运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<title>React App</title>
</head>
<body>
<h1>Hello world from the index</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-11-28 07:16:22
CDN的链接看起来已经过时了。这样做很好：
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello</h1>,
document.getElementById('root')
);
</script>
啊，我认为你在更新代码中的问题似乎是与babel链接有关。应该是巴贝尔而不是浏览器。
因此，例如，只需替换：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js通过以下方式：
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js这是一个工作小提琴。
以下是您可以考虑使用特定版本的链接列表：
https://cdnjs.com/libraries/react
Stack Overflow用户
发布于 2018-11-28 05:45:34
在不包括ReactDOM对象的脚本中，这似乎是ReactDOM的旧版本。但是，使用最新的React并将ReactDom更改为ReactDOM，您的代码就会编译得很好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<h1>Hello world from the index form within HTML</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53512777
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号