Question

所以我是使用ReactJS的新手，并继续遇到这个错误：

wrap — babel.js:4848SyntaxError: Inline Babel script: Unexpected token, expected { (17:8)
  15 | 
  16 |         buttonClicked()
> 17 |         render() {
     |         ^
  18 | 
  19 |           let msg = this.state.message;
  20 |

谁能告诉我我做错了什么？

Answer 1

到目前为止，感谢您的回复！这是我的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Demo</title>
    <style media="screen">
     .messageBox {
       border: 1px solid;
       margin: 1em;
       padding: 2em;
     }

.error {
  border-color: red;
  background-color: #eebbbb;
}

.success {
  border-color: blue;
  background-color: #bbbbee;
}

.hidden {
  display: none
}
    </style>
  </head>
  <body>
    <main id="content"></main>

    <script src="https://unpkg.com/babel-standalone"></script>
    <script type="text/javascript" src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js "></script>

    <script type="text/babel" data-presets="react">

      class NameInput extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            message: {
              type: "success",
              body: "Now my message is in NameInput's state"
            }
          }

          this.buttonClicked = this.buttonClicked.bind(this);
        }

        buttonClicked(evt) {

        }

        render() {

          let msg = this.state.message;

          return (
            <div>
             <label>Name: <input type="text" /></label>
             <button onClick={this.buttonClicked}>Click me!</button>

             <MessageBox type={msg.type} message={msg.body}/>
            </div>
          )
        }
      }

      class MessageBox extends React.Component {
        render() {
          return (
            <div className={"messageBox " + (this.props.type || "hidden")}
              {this.props.message}
            </div>

          )
        }
      }

        ReactDOM.render(<NameInput />, document.getElementById('content'));

    </script>
  </body>
</html>

Answer 2

希望您的HTML文件如下所示：

<html>

<head>
    <title>demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
    <div id="container"/></div>
    <script type="text/babel">
        class MessageBox extends React.Component {
            constructor(props){
            super(props);
            }
            render() {
                return (
                    <div>
                        <div className={`messageBox ${this.props.type} || hidden`}>
                            {this.props.message}
                        </div>
                    </div>
                );
            }
        } 

    class NameInput extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                message: {
                type: "success",
                body: "Now my message is in NameInput's state"
                }
            }
            this.buttonClicked = this.buttonClicked.bind(this);
        }

        buttonClicked(evt) {
            alert("hi");
        }

        render() {

            let msg = this.state.message;

            return (
                <div>
                <label>Name: <input type="text" /></label>
                <button onClick={this.buttonClicked}>Click me!</button>

                <MessageBox type={msg.type} message={msg.body}/>
                </div>
            )
            }
    }

    ReactDOM.render(
        <NameInput />,
        document.getElementById('container')
    );
</script>

working demo

ReactJS语法错误

2 个答案: