我是React的新手，正在遇到令人困惑的情况。
我正在尝试使用ReactDOM渲染H1标签，但标头的结束标签不断变成字符串。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<title> React Project</title>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/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上的代码如下所示：
错误是[未捕获的语法错误：意外的令牌'
我尝试使用React官方网站建议的Constant，
ReactDOM.render(
const element = <h1>Hello, world</h1>;
document.getElementById("root")
)
;
但是结果是相同的。
那么在这种情况下我该怎么办？
您的<script>标签告诉浏览器它是Javascript，但实际上它是JSX。尝试执行指令you can find here。
<!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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/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>
您还需要使用JS预处理器来了解JSX格式，例如Babel
ReactDOM.render(
(<h1> Hello World </h1>),
document.getElementById("root")
);<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>