ReactJS不提供DOM输出

ReactJS gives no DOM output

本文关键字：DOM 输出 ReactJS      更新时间：2023-09-26

我目前正在尝试使用Play和Scala构建一个简单的react.js应用程序。我可以看到JSX编译器创建的脚本被插入到页面的头部，但在我指定的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管理UI

SOTA Web管理员

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

您需要调用您的匿名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);
}());

请注意在最后一行中添加了()。此外，Render.renderComponent()自v0.12以来一直被弃用。新的方法是React.render()。

相关文章：