我正在使用我自己的服务器(apache)和建议的HTML文件以及教程示例的逐字副本来完成reactjs教程...
最简单的示例在我的服务器上失败,但在JSFiddle上运行..
带脚本的HTML文件如下所示.
该脚本在render:function(){...时失败并出现语法错误
firefox和Safari中的错误信息(mac版,最新版)..
msgstr"""SyntaxError:期望表达式,得到'<'React.render(,document.getElementById('container')"""[我的文件]
<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>
Mic*_*ley 18
您发布的代码存在两个问题.
第一个是JSX转换器没有转换你的代码,因为标签type上没有相应的属性script.
更改
<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>
| 归档时间： |
|
| 查看次数： |
10242 次 |
| 最近记录： |