React, встроенный скрипт Babel: неожиданный токен ReactDOM - PullRequest
Новая
       8

React, встроенный скрипт Babel: неожиданный токен ReactDOM

0 голосов
/ 26 июня 2019

Я пытаюсь читать и изучать реагировать, и здесь я создал базовый пример реакции в блокноте ++, а также попробовал здесь: https://codesandbox.io/s/new --- но по какой-то причине получаю сообщение об ошибке, прочитал везде, не знаю причина, я использовал type="text/babel", а также использовал необходимые теги сценария для babel и реагировать. Сообщение об ошибке, которое я получаю:

Uncaught 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>

Английский не мой родной язык, поэтому извините за ошибки.

1 Ответ

0 голосов
/ 26 июня 2019

Мне удалось исправить ваш код, были различные проблемы.попробуйте этот код для 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>

Обратите внимание, что мне пришлось удалить ваш импорт, чтобы заставить его работать, импорт реакции не нужен.и импорт стиля, который вы должны выяснить самостоятельно.Этот код будет отображать ваш HTML, и вы сможете добиться прогресса оттуда.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...