ReactJS：无法在浏览器上显示 html 文本
Posted
技术标签:
【中文标题】ReactJS：无法在浏览器上显示 html 文本【英文标题】：ReactJS:cannot display html text on browser 【发布时间】：2017-12-23 02:24:26 【问题描述】：我似乎不知道该怎么做才能纠正这个问题：
我总是在浏览器上没有显示，我希望看到“Hello React”。
这里是 HelloWorld 代码：
ReactDOM.render(
你好，React！
,document.getElementById('root'));【问题讨论】：
React 会自动转换 JSX 吗？我认为你应该使用babel，typescript....。
我认为您错过了 html 中的起始 <body> 标记。并且脚本标签应该放在结束</body>标签之前。
是的，在 SO 上格式化时代码搞砸了。当我稍后看到您的评论时尝试对其进行编辑时，情况变得更糟。现在它甚至在 SO 中打印出结果，并且遗漏了代码。
【参考方案1】：
在此处查看您的示例，https://codesandbox.io/s/ElRmqWK5Y 我会建议下载 react 包并在开始时在那里运行你的代码，我对你的代码的看法是你应该先添加 react 库而不是 react-dom。
【讨论】：
+Abhishek，请问我为什么要先下载 react 包？【参考方案2】：您的代码中缺少
，尝试添加它并告诉我们它是否有效【讨论】：
【参考方案3】：所以基本上问题是你没有编译你的 jsx。对于您的简单示例，如果您不想使用某些捆绑程序“显式”配置转换，您可以添加 Babel 库并更改
<script type="text/jsx">
到
<script type="text/babel">
让我们看看这里，但请记住jsfiddle在后面使用babel（非常确定）：
https://jsfiddle.net/69z2wepo/83023/
还让我粘贴来自 babel 文档的示例。特别是看看添加的 babel lib + 脚本类型。
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
【讨论】：
【参考方案4】：您可以使用以下代码库来了解 React JS 的基本知识（已使用最新版本 react-15.0.0） -
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First React Example</title>
<!-- use this as script file "fb.me/react-15.0.0.js"
"fb.me/react-dom-15.0.0.js"
cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js" -->
</head>
<body>
<div id="greeting-div"></div>
<script type="text/babel">
var Greeting = React.createClass(
render: function()
return ( <div>this.props.children </div>)
);
ReactDOM.render(
<div>
<Greeting>hello Aby</Greeting>
<h1>HELLO</h1>
</div>,
document.getElementById('greeting-div') );
</script>
</body>
</html>【讨论】：
以上是关于ReactJS：无法在浏览器上显示 html 文本的主要内容，如果未能解决你的问题，请参考以下文章
带有 JSX 和类的 ReactJS 'Hello World' 不会向浏览器打印任何内容