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

Question

我是 reactJs 的新手，正在使用 code。我希望将 babel 格式转换为 javascript。所以，我去了site 并将JXS 元素转换为javascript 中的相应元素以进行反应。现在如果使用 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 })
            );
          }

在浏览器控制台中出现错误Uncaught TypeError: Cannot set property '_inputElement' of undefined。但是当我使用相同代码的 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>
        );
      }

它工作正常。什么是在 babel 版本中没有发生的 javascript 代码中产生问题？是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);

Answer 1

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

1. 将undefined 显式绑定到this。是这样的：doSomething.bind(undefined, arg1, arg2)。 更新：这只适用于“严格模式”，否则它总是被强制为对象，它将默认为全局对象
2. 隐含在严格模式上。 this 不会默认为全局对象，而是被赋予 undefined 值。

我认为第二个在这里应用。如果你放错了代码，你在 Babel 生成的代码中将 this 默认设置为 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
• You don't know JS: this object & prototypes