语法错误“正在尝试运行reactjs tuturial时出现'<'”
我正在通过reactjs教程使用我自己的服务器(apache)以及建议的HTML文件和教程示例的逐字拷贝来工作...语法错误“正在尝试运行reactjs tuturial时出现'<'”
最简单的例子失败我的服务器上,但工作在的jsfiddle ..用脚本
我的HTML文件如下所示..
脚本失败,语法错误的渲染:函数(){.. 。
firefox中的错误消息和Safari(Mac版,最新的)..
“” “语法错误:预期的表现,得到了 '<' React.render(,的document.getElementById( '集装箱') ”“” [我的文件]
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script>
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
</script>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
</body>
</html>
您发布的代码有两个问题。
第一个是JSX转换器未转换您的代码,因为script
标记上没有相应的type
属性。
变化
<script>
var Hello = React.createClass({
...
到
<script type="text/jsx">
var Hello = React.createClass({
...
其次,你打电话document.getElementById('container')
之前div
在页面上确实存在;将最后的script
标记及其内容移至div
之后(例如,移至body
的底部)。
您应该结束了与代码类似于它是如何在教程中所示:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
// Your code here
</script>
</body>
</html>
谢谢 - 我现在看到了..它以这种方式工作,并且完全理解为什么它在 – steelliberty
之前无法正常工作。这对我没有任何作用。我得到空白屏幕。没有控制台错误。 –
尝试移动''标签到体内。 JSX转换器脚本需要时间加载。 – Harangue