使用标题标签渲染文本
我是 React 新手，我遇到了一个令人困惑的情况。
我正在尝试使用 ReactDOM 渲染 H1 标签，但标头的结束标签不断变成字符串。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title> React Project</title>
<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById("root")
);
</script>
</body>
</html>
SublimeText 上的代码如下所示：
在此输入图像描述
错误是 [Uncaught SyntaxError: 意外的标记 '<']
我尝试按照React官方网站的建议使用 Constant，
ReactDOM.render(
const element = <h1>Hello, world</h1>;
document.getElementById("root")
)
;
但结果是一样的。
那么这种情况我该怎么办呢？
呼啦一阵风2回答
-
杨魅力
您还需要使用 JS 预处理器来理解 JSX 格式，例如 Babel<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script><div id="root"></div><script type="text/babel"> ReactDOM.render( <h1> Hello World </h1>, document.getElementById("root") );</script> -
守候你守候我
你的<script>标签告诉浏览器它是，Javascript但实际上它是 JSX。您需要使用 Babel 之类的东西来转译 JSX。<!DOCTYPE html><html><head> <title> React Project</title> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script></head><body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello World</h1>, document.getElementById("root") ); </script></body></html>
随时随地看视频慕课网APP
相关分类
Html5