javascript - ReactJS 没有给出 DOM 输出

Question

我目前正在尝试使用 Play 和 Scala 构建一个简单的 React.js 应用程序。我可以看到 JSX 编译器创建的脚本被插入到我的页面的头部，但没有元素被注入(inject)到我指定的 DOM 中。我在 jsx 代码中设置了断点，但它们从未被触发。 javascript 控制台中没有错误(尽管之前我有语法错误，所以 JSX 编译器肯定正在运行)，并且 React 的 chrome 扩展只是显示一个空白。我用谷歌搜索了一下，找不到其他人遇到这个问题，所以我有点不知所措。

我的 JSX 代码(react-app.js):

(function () {
  var AddVin = React.createClass({
    render: function() { return (
        <div className="form-group">
          <label htmlFor="vinID">VIN</label>
          <input type="text" className="form-control" id="vinID" placeholder="VIN"/>
          <button type="submit" className="btn btn-primary">Add VIN</button>
        </div>
      );}
  });

  React.renderComponent(<AddVin />, document.body);
});

我的 HTML (main.scala.html):

@()()

SOTA 管理界面

SOTA 网络管理

    <h2>Add New VIN</h2>

    <div id="react-app">
    </div>

    <script src="@routes.Assets.versioned("libs/react/JSXTransformer.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("libs/react/react.js")" type="text/javascript"></script>
    <script type="text/jsx" src="@routes.Assets.versioned("javascripts/react-app.js")" type="text/javascript"></script>

  </div>
</body>

我可以看到显示的标签，因此路由肯定是正确的等......并且 Play 控制台中没有错误。

JSX 输出被注入(inject)到我的页面的脚本标记中:

(function () {
  var AddVin = React.createClass({displayName: "AddVin",
    render: function() { return (
        React.createElement("div", {className: "form-group"}, 
          React.createElement("label", {htmlFor: "vinID"}, "VIN"), 
          React.createElement("input", {type: "text", className: "form-control", id: "vinID", placeholder: "VIN"}), 
          React.createElement("button", {type: "submit", className: "btn btn-primary"}, "Add VIN")
        )
      );}
  });

  React.renderComponent(React.createElement(AddVin, null), document.body);
});

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbImFzc2V0cy9qYXZhc2NyaXB0cy9yZWFjdC1hcHAuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsQ0FBQyxZQUFZO0VBQ1gsSUFBSSw0QkFBNEIsc0JBQUE7SUFDOUIsTUFBTSxFQUFFLFdBQVcsRUFBRTtRQUNqQixvQkFBQSxLQUFJLEVBQUEsQ0FBQSxDQUFDLFNBQUEsRUFBUyxDQUFDLFlBQWEsQ0FBQSxFQUFBO1VBQzFCLG9CQUFBLE9BQU0sRUFBQSxDQUFBLENBQUMsT0FBQSxFQUFPLENBQUMsT0FBUSxDQUFBLEVBQUEsS0FBVyxDQUFBLEVBQUE7VUFDbEMsb0JBQUEsT0FBTSxFQUFBLENBQUEsQ0FBQyxJQUFBLEVBQUksQ0FBQyxNQUFBLEVBQU0sQ0FBQyxTQUFBLEVBQVMsQ0FBQyxjQUFBLEVBQWMsQ0FBQyxFQUFBLEVBQUUsQ0FBQyxPQUFBLEVBQU8sQ0FBQyxXQUFBLEVBQVcsQ0FBQyxLQUFLLENBQUUsQ0FBQSxFQUFBO1VBQzFFLG9CQUFBLFFBQU8sRUFBQSxDQUFBLENBQUMsSUFBQSxFQUFJLENBQUMsUUFBQSxFQUFRLENBQUMsU0FBQSxFQUFTLENBQUMsaUJBQWtCLENBQUEsRUFBQSxTQUFnQixDQUFBO1FBQzlELENBQUE7UUFDTixDQUFDO0FBQ1QsR0FBRyxDQUFDLENBQUM7O0VBRUgsS0FBSyxDQUFDLGVBQWUsQ0FBQyxvQkFBQyxNQUFNLEVBQUEsSUFBQSxDQUFHLENBQUEsRUFBRSxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUM7Q0FDbEQsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiAoKSB7XG4gIHZhciBBZGRWaW4gPSBSZWFjdC5jcmVhdGVDbGFzcyh7XG4gICAgcmVuZGVyOiBmdW5jdGlvbigpIHsgcmV0dXJuIChcbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmb3JtLWdyb3VwXCI+XG4gICAgICAgICAgPGxhYmVsIGh0bWxGb3I9XCJ2aW5JRFwiPlZJTjwvbGFiZWw+XG4gICAgICAgICAgPGlucHV0IHR5cGU9XCJ0ZXh0XCIgY2xhc3NOYW1lPVwiZm9ybS1jb250cm9sXCIgaWQ9XCJ2aW5JRFwiIHBsYWNlaG9sZGVyPVwiVklOXCIvPlxuICAgICAgICAgIDxidXR0b24gdHlwZT1cInN1Ym1pdFwiIGNsYXNzTmFtZT1cImJ0biBidG4tcHJpbWFyeVwiPkFkZCBWSU48L2J1dHRvbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICApO31cbiAgfSk7XG5cbiAgUmVhY3QucmVuZGVyQ29tcG9uZW50KDxBZGRWaW4gLz4sIGRvY3VtZW50LmJvZHkpO1xufSk7XG4iXX0=

Answer 1

您需要调用匿名 JS 函数。

(function () {
  var AddVin = React.createClass({
    render: function() { return (
        <div className="form-group">
          <label htmlFor="vinID">VIN</label>
          <input type="text" className="form-control" id="vinID" placeholder="VIN"/>
          <button type="submit" className="btn btn-primary">Add VIN</button>
        </div>
      );}
  });

  React.render(<AddVin />, document.body);
}());

注意最后一行添加了()。此外，自 v0.12 起，Render.renderComponent() 已被弃用。 。新方法是 React.render()。