Question

我正在尝试阅读和学习reactjs，并且在这里我在记事本++中设置了一个基本的react示例，并且还在这里尝试过：https://codesandbox.io/s/new ---但由于某种原因会收到错误消息，所以到处都读不懂原因，我使用了type="text/babel"，还使用了Babel和反应所需的脚本标签。我收到的错误消息：

未捕获到的SyntaxError：内联Babel脚本：意外令牌（44:12）}} ReactDOM.render（，这是jsx和CSS代码：

.commentContainer{
background: #eee;
border: 2px solid #dec0c0
display: inline-block;
    margin: 9px;
	    padding: 9px;
}

button {
    margin-right: 7px;
	border: none;
    color: #f7e9e9;
    font: 13px/1.4 Roboto,sans-serif;
    padding: 9px 13px;
}

.button-primary {
    background-color: #3f5367;
    /* text-decoration: none; */
}
.button-danger{
background-color:#c14133;
}
.board {
    background-color: #b9def0;
    /* height: 100%; */
    padding: 4px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" />
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="maini.css" />
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/babel">
      import React from "react";

      import "./styles.css";

      var Comment = class extends React.Component{
        getinitialState() {
          return {editing:false}
        }
        edit(){
          this.setState({editing:true});
        }
        remove(){
          console.log("removing comment");
        }
        save(){
          this.setState({editing:true});
        }
        renderNormal(){
          return (
            <div className="commentContainer">
              <div className="commentText">{this.props.children}</div>
              <button onClick={this.edit} className="button-primary"> Editoi</button>
              <button onClick={this.remove} className="button-danger">{this.props.children} </button>
            </div>
          )
        }
        renderForm(){
          return (
            <div className="commentContainer">
              <textarea>defaultValue={this.props.children}</textarea>
              <button onClick={this.save} className="button-success"> Save</button>
            </div>
          )
        }
        render () {
          if(this.state.editing){ 
            return this.renderForm();
          } else {
            return this.renderNormal();
          }
        }
      ReactDOM.render(
        <div className="board">
            <Comment> Hey my name is james</Comment>
            <Comment> Beand</Comment>
            <Comment> Tuna</Comment>
        </div>
        , document.getElementById('container'));
    </script>
  </body>
</html>

英语不是我的母语，所以很抱歉犯错。

Answer 1

我能够解决您的代码，出现了各种问题。为html / inline js尝试此代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1" />
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="maini.css" />
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/babel">
      class Comment extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            editing: false
          };
          this.edit = this.edit.bind(this);
          this.remove = this.remove.bind(this);
          this.save = this.save.bind(this);
          this.renderNormal = this.renderNormal.bind(this);
          this.renderForm = this.renderForm.bind(this);
        }
        edit() {
          this.setState({ editing: true });
        }
        remove() {
          console.log("removing comment");
        }
        save() {
          this.setState({ editing: true });
        }
        renderNormal() {
          return (
            <div className="commentContainer">
              <div className="commentText">{this.props.children}</div>
              <button onClick={this.edit} className="button-primary">
                {" "}
                Editoi
              </button>
              <button onClick={this.remove} className="button-danger">
                {this.props.children}{" "}
              </button>
            </div>
          );
        }
        renderForm() {
          return (
            <div className="commentContainer">
              <div>defaultValue={this.props.children}</div>
              <button onClick={this.save} className="button-success">
                {" "}
                Save
              </button>
            </div>
          );
        }
        render() {
          if (this.state.editing) {
            return this.renderForm();
          } else {
            return this.renderNormal();
          }
        }
      }
      ReactDOM.render(
        <div className="board">
          <Comment> Hey my name is james</Comment>
          <Comment> Beand</Comment>
          <Comment> Tuna</Comment>
        </div>,
        document.getElementById("container")
      );
    </script>
  </body>
</html>

请注意，我必须删除您的导入才能使它正常工作，不需要react导入。以及样式导入，您必须自己弄清楚。这段代码将呈现您的HTML，您应该能够从那里取得进步。

React，内联Babel脚本：意外令牌ReactDOM

1 个答案: