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>
        );
      }

工作正常。什么在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);

Answer 1

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

明确约束undefined与this。它是这样的：doSomething.bind(undefined, arg1, arg2)。 更新：这只适用于'严格模式'，因为否则这总是被强制为一个对象，它将默认为全局对象
隐含于严格模式。 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及其行为的更多信息：

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

1 个答案: