Question

嗨，Stack Overflow的好人。我正在学习REACTJS。并且它抛出了这个错误：Uncaught SyntaxError：embedded：意外的标记var Comment = React.createClass（{...}）;

这是我的代码：`

<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创建一个组件，该组件的数组应该是＆＃34; var Comment = React.createClass（{..}）;我不知道为什么它不会将它识别为可以使用的阵列。我非常感谢StackOverflow的好帮手。

Answer 1

您正在JSX中编写React代码，脚本标记无法理解。为了运行React代码，请使用webpack或browserify将jsx捆绑到.js文件中，然后在脚本标记中包含该.js文件，或者为了测试代码使用 JSFIDDLE 编写代码。它集成了JSX。

示例 webpack.config.js

var 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;

<强> index.jsx

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"));

<强>的index.html

<body>

<div id="example">

</div>

<div id="container">

</div>
<script src="./src/bundle.js"></script>
</body>

您还需要一个package.json来提供所有依赖项。

Here 是一个很好的视频教程系列，可以帮助您完成所有配置

Answer 2

脚本标记无法理解JSX语法。 JSX需要编译为JavaScript。在JSFiddle中试用你的例子。 JSFiddle具有与React一起使用的集成脚本。

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">
</script>

Answer 3

您可以尝试将JSX代码移动到新的.jsx文件并在.html

中引用该文件

Answer 4

我遇到了同样的问题，好像我们正在观看相同的教程视频：）

无论如何，getinitialState应该是getInitialState。小心第4个字母。

Answer 5

在上面的部分中给出的代码段代码中的一个更改。纠正错误的拼写错误。

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>

未捕获的SyntaxError：embedded：意外的标记var Comment = React.createClass（{...}）;

5 个答案: