Reactjs 未捕获的语法错误：嵌入：意外的标记var Comment=React.createClass（{…}）；
嘿，堆栈溢出的伟大的人们。我现在正在学习英语。它抛出了这个错误：uncaughtsyntaxerror:embedded:Unexpected-tokenvar-Comment=React.createClass（{…}） 这是我的密码：`Reactjs 未捕获的语法错误：嵌入：意外的标记var Comment=React.createClass（{…}）；,reactjs,syntax,Reactjs,Syntax,嘿，堆栈溢出的伟大的人们。我现在正在学习英语。它抛出了这个错误：uncaughtsyntaxerror:embedded:Unexpected-tokenvar-Comment=React.createClass（{…}） 这是我的密码：` <body> <div id="example"> </div> <div id="container"> </div> <script type="text/babel">
<body>
<div id="example">
</div>
<div id="container">
</div>
<script type="text/babel">
var Comment = React.createClass({...});
var Board = React.createClass({
getinitialState: function(){
return{
comments: [
"I like bacon.",
"Want to get ice cream?",
"Okay, we've got enough comments now."
]
}
},
render: function() {
return(
<div className="board">
{
this.state.comments.map(function(text, i){
return(<Comment key={i}>{text}</Comment>);
})
}
</div>
);
}
})
ReactDOM.render(<Board/>, document.getElementById("container"));
</script>
<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <!-- older transpiler 5.8.24 works with this app-->
</body>
var Comment=React.createClass（{…}）；
var Board=React.createClass({
getinitialState:函数（）{
返回{
评论：[
“我喜欢熏肉。”，
“想买冰淇淋吗？”，
“好的，我们现在有足够的评论了。”
]
}
},
render:function（）{
返回(
{
this.state.comments.map（函数（text，i）{
返回（{text}）；
})
}
);
}
})
render（，document.getElementById（“容器”）；
我不知道这里发生了什么事。我试图通过var Comment创建一个组件，该组件应该有一个数组“var Comment=React.createClass（{..}）；我不知道为什么它不能将其识别为一个将要使用的数组。StackOverflow的好朋友们，我非常感谢在这方面的帮助。脚本标记不理解JSX语法。JSX需要编译为JavaScript。请在中尝试您的示例。JSFIDLE有集成脚本可用于React
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">
</script>
您正在用脚本标记无法理解的JSX编写React代码。要运行React代码，请使用webpack或browserify将您的JSX捆绑到
.js.jsvar webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src');
var APP_DIR = path.resolve(__dirname, 'src');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
}
};
module.exports = config;
import React from 'react';
import ReactDOM from 'react-dom';
var Board = React.createClass({
getinitialState: function(){
return{
comments: [
"I like bacon.",
"Want to get ice cream?",
"Okay, we've got enough comments now."
]
}
},
render: function() {
return(
<div className="board">
{
this.state.comments.map(function(text, i){
return(<Comment key={i}>{text}</Comment>);
})
}
</div>
);
}
})
ReactDOM.render(<Board/>, document.getElementById("container"));
从“React”导入React；
从“react dom”导入react dom；
var Board=React.createClass({
getinitialState:函数（）{
返回{
评论：[
“我喜欢熏肉。”，
“想买冰淇淋吗？”，
“好的，我们现在有足够的评论了。”
]
}
},
render:function（）{
返回(
{
this.state.comments.map（函数（text，i）{
返回（{text}）；
})
}
);
}
})
render（，document.getElementById（“容器”）；
<body>
<div id="example">
</div>
<div id="container">
</div>
<script src="./src/bundle.js"></script>
</body>
是一个很好的视频教程系列，可以帮助您进行所有配置您可以尝试将您的JSX代码移动到一个新的
.JSX.html无论如何，getinitialState应该是getinitialState。注意第四个字母。对代码片段做一个更改，上面一节给出了这个更改。 在这里纠正小的拼写错误 getinitialState（）应该是getinitialState（） ES5使用getInitialState（）初始化状态变量，即React.createClass（..） ES6使用构造函数（）初始化状态变量，即类注释扩展React.Component（..） 这里是ES6的另一个示例，请查看此示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div id="content"></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script type="text/babel">
class CommentBox extends React.Component{
constructor(props){
super(props);
this.state = {
editable : false,
commentMsg : ">>"
};
}
save(event){
this.setState({commentMsg:event.target.value})
}
remove(){
this.setState({
editable:false
})
}
edit(){
this.setState({
editable:true
})
}
renderForm(){
return (
<div className="row">
<div>{this.props.children}</div>
<div><textArea name="commentBox" onChange={this.save.bind(this)}></textArea></div>
<button type="button" className="btn btn-danger">Save</button>
<button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button>
{this.state.commentMsg}
</div>
);
}
renderHtml(){
return (
<div className="row">
<div>{this.props.children}</div>
<div>{this.state.commentMsg}</div>
<button type="button" className="btn btn-danger" onClick={this.edit.bind(this)}>Edit</button>
<button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button>
</div>
);
}
render() {
if(this.state.editable){
return this.renderForm(this);
}else{
return this.renderHtml(this);
}
}
}
class Board extends React.Component{
constructor(props){
super(props);
this.state ={
comments:[
'Techical Comments',
'Wordpress Comments',
'Facebook Comments'
]
}
}
render(){
return(
<div className="container-fluid">{
this.state.comments.map(function(text,i){
return (
<CommentBox key={i}>{text}</CommentBox>
);
})
}
</div>
);
}
}
ReactDOM.render(
<Board />
, document.getElementById('content'))
</script>
</body>
</html>
类CommentBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可编辑：false，
commentMsg:“>>”
};
}
保存（事件）{
this.setState（{commentMsg:event.target.value}）
}
删除（）{
这是我的国家({
可编辑：false
})
}
编辑（）{
这是我的国家({
可编辑：真
})
}
renderForm（）{
返回(
{this.props.children}
拯救
去除
{this.state.commentMsg}
);
}
renderHtml（）{
返回(
{this.props.children}
{this.state.commentMsg}
编辑
去除
);
}
render（）{
if（this.state.editable）{
返回此.renderForm（此）；
}否则{
返回this.renderHtml（this）；
}
}
}
类板扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
评论：[
“技术评论”，
“Wordpress评论”，
“Facebook评论”
]
}
}
render（）{
返回(
{
this.state.comments.map（函数（text，i）{
返回(
{text}
);
})
}
);
}
}
ReactDOM.render(
，document.getElementById（'content'））