SOTA Web Admin

Question

我目前正在尝试使用Play和Scala构建一个简单的react.js应用。我可以看到JSX编译器创建的脚本被插入到我的页面的头部，但没有元素被注入到我指定的DOM中。我在jsx代码中设置断点，它们永远不会被触发。 javascript控制台中没有错误（虽然之前有过语法错误，所以JSX编译器肯定在运行）并且反应的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 Admin UI

SOTA Web Admin

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

我可以看到显示的标签，所以路由肯定是正确的等等。播放控制台中没有错误。

JSX输出，它被注入我页面中的脚本标记：

(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()。

ReactJS没有提供DOM输出

SOTA Web Admin

1 个答案: