javascript中的引用和reactJS中的babel之间的区别

Difference between referencing in javascript and babel in reactJS

本文关键字：babel 之间 中的 区别 引用 javascript reactJS      更新时间：2023-09-26

我是reactJs的新手，正在编写代码。我希望将babel格式转换为javascript。因此，我访问了该站点，并将JXS元素转换为javascript中的相应元素以进行react。现在如果使用javascript版本的代码

render: function render() {
            var _this = this;
            return React.createElement("div",{ className: "todoListMain" },
              React.createElement("div",{ className: "header" },
                React.createElement(
                  "form",
                  { onSubmit: this.addItem },
                  React.createElement("input", { ref: function ref(a) {
                      return _this._inputElement = a;
                    },
                    placeholder: "enter task" }),
                  React.createElement("button",{ type: "submit" },"add"
                  )
                )
              ),
              React.createElement(TodoItems, { entries: this.state.items })
            );
          }

在浏览器控制台中获取错误CCD_ 1。但是当我使用相同代码的babel版本时，它是

 render: function() {
        return (
          <div className="todoListMain">
            <div className="header">
              <form onSubmit={this.addItem}>
                <input ref={(a) => this._inputElement = a}
                       placeholder="enter task">
                </input>
                <button type="submit">add</button>
              </form>
            </div>
            <TodoItems entries={this.state.items}/>
          </div>
        );
      }

它运行良好。是什么在javascript代码中产生了babel版本中没有的问题？javascript版本中的引用方式是错误的还是其他错误？

添加了Javascript转换的代码。

var destination = document.querySelector("#container");
    var TodoItems = React.createClass({
      displayName: "TodoItems",
      render: function render() {
        var todoEntries = this.props.entries;
        function createTasks(item) {
          return React.createElement("li",{ key: item.key },item.text
          );
        }
        var listItems = todoEntries.map(createTasks);
        return React.createElement("ul",{ className: "theList" },listItems
        );
      }
    });
    var TodoList = React.createClass({
          displayName: "TodoList",
          getInitialState: function getInitialState() {
            return {
              items: []
            };
          },
          addItem: function addItem(e) {
            var itemArray = this.state.items;
            itemArray.push({
              text: this._inputElement.value,
              key: Date.now()
            });
            this.setState({
              items: itemArray
            });
            this._inputElement.value = "";
            e.preventDefault();
          },
          render: function render() {
            var _this = this;
            return React.createElement("div",{ className: "todoListMain" },
              React.createElement("div",{ className: "header" },
                React.createElement(
                  "form",
                  { onSubmit: this.addItem },
                  React.createElement("input", { ref: function ref(a) {
                      return _this._inputElement = a;
                    },
                    placeholder: "enter task" }),
                  React.createElement("button",{ type: "submit" },"add"
                  )
                )
              ),
              React.createElement(TodoItems, { entries: this.state.items })
            );
          }
    });
    ReactDOM.render(React.createElement("div",null,React.createElement(TodoList, null)), destination);

我只是按照我认为你采取的步骤，简单地让页面工作，即使你在问题中提供的代码也是如此。我试图强制执行你得到的错误，但我做不到，但我认为你解耦了代码，或者以严格模式的方式重新排列了代码。您的错误告诉我们，您正试图将属性_inputElement设置为undefined，在您的代码中，_inputElement仅与this匹配（甚至是_this，它是对此的引用）。this可以是undefined有两种可能的方式：

  1. 显式地将undefined绑定到Uncaught TypeError: Cannot set property '_inputElement' of undefined0。它是这样的：doSomething.bind(undefined, arg1, arg2)Update：这只适用于"严格模式"，因为否则它总是被强制为对象，它将默认为全局对象
  2. 在严格模式上隐式。this不会默认为全局对象，而是被赋予undefined值

我认为第二个适用于这里。如果您放错了代码的位置，在某种程度上，您使this在Babel生成的代码中默认为undefined，因为添加了use strict语句，该错误不会在JSX代码中显示（在Babel编译之前），因为它将默认为global对象（因为它没有use strict语句）。

不管怎样，这里有一个包含编译代码的页面的工作版本，这是您在自己的问题上提供的代码的复制和粘贴：

<!DOCTYPE html>
<html>
<head>
  <title>React! React! React!</title>
  <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xap1/t39.3284-6/13065892_243502592679528_80343462_n.js"></script>
  <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xpf1/t39.3284-6/13176388_1695714220691119_811926456_n.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <style>
    body {
      padding: 50px;
      background-color: #66CCFF;
      font-family: sans-serif;
    }
    .todoListMain .header input {
      padding: 10px;
      font-size: 16px;
      border: 2px solid #FFF;
    }
    .todoListMain .header button {
      padding: 10px;
      font-size: 16px;
      margin: 10px;
      background-color: #0066FF;
      color: #FFF;
      border: 2px solid #0066FF;
    }
    .todoListMain .header button:hover {
      background-color: #003399;
      border: 2px solid #003399;
      cursor: pointer;
    }
    .todoListMain .theList {
      list-style: none;
      padding-left: 0;
      width: 255px;
    }
    .todoListMain .theList li {
      color: #333;
      background-color: rgba(255,255,255,.5);
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div id="container">
  </div>
  <script type="text/javascript">
var destination = document.querySelector("#container");
    var TodoItems = React.createClass({
      displayName: "TodoItems",
      render: function render() {
        var todoEntries = this.props.entries;
        function createTasks(item) {
          return React.createElement("li",{ key: item.key },item.text
          );
        }
        var listItems = todoEntries.map(createTasks);
        return React.createElement("ul",{ className: "theList" },listItems
        );
      }
    });
    var TodoList = React.createClass({
          displayName: "TodoList",
          getInitialState: function getInitialState() {
            return {
              items: []
            };
          },
          addItem: function addItem(e) {
            var itemArray = this.state.items;
            itemArray.push({
              text: this._inputElement.value,
              key: Date.now()
            });
            this.setState({
              items: itemArray
            });
            this._inputElement.value = "";
            e.preventDefault();
          },
          render: function render() {
            var _this = this;
            return React.createElement("div",{ className: "todoListMain" },
              React.createElement("div",{ className: "header" },
                React.createElement(
                  "form",
                  { onSubmit: this.addItem },
                  React.createElement("input", { ref: function ref(a) {
                      return _this._inputElement = a;
                    },
                    placeholder: "enter task" }),
                  React.createElement("button",{ type: "submit" },"add"
                  )
                )
              ),
              React.createElement(TodoItems, { entries: this.state.items })
            );
          }
    });
    ReactDOM.render(React.createElement("div",null,React.createElement(TodoList, null)), destination);
  </script>
</body>
</html>

这里有更多关于this及其行为的信息：

  • MDN
  • 你不知道JS：这个对象&原型
相关文章：