Question

我有一个现有的Backbonejs / Requirejs应用程序，我想向其中添加Reactjs组件。我已经安装了babel-cli和babel-preset-react-app。我将src目录添加到了根目录，在其中添加了一个jsx文件，一个Reactjs类组件。由babel创建的已转译文件目前暂时发送到public/build。

文件夹结构：

/public
/public/build
/public/assets
/public/assets/js
/public/assets/js/views
...
/public/assets/templates
...
/src
...

在我的一个视图模板文件中，我添加了一个div，我想在其中添加Reactjs组件，目前我在其后有一个脚本标记，因此它运行了已转换的js文件，即

<div...>
<div id="history"></div>
<script src="../../build/like_button.js"></script>
</div>

但是，这在下面给出了一个错误。有人知道为什么吗？

jquery.js:2 Uncaught Invariant Violation: Target container is not a DOM element.
    at invariant (https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js:49:15)
    at Object.render (https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js:21286:36)
    at eval (eval at <anonymous> (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:14136), <anonymous>:35:10)
    at eval (<anonymous>)
    at http://localhost:5050/assets/js/libs/jquery/jquery.js:2:14136
    at Function.globalEval (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:14147)
    at text script (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:84752)
    at On (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:5867)
    at T (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:80873)
    at r (http://localhost:5050/assets/js/libs/jquery/jquery.js:2:86563)

jsx文件中的内容是：

'use strict';

class HelloWorld extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
        <h1>Hello, world!</h1>
    );
  }
}

let domContainer = document.getElementById('#history');
ReactDOM.render(<HelloWorld />, domContainer);

更新1： 如下所示，我已将脚本转移到视图的定义部分，但仍然看到类似的错误。

define([
    'jquery',
    'underscore',
    'backbone',
    ...
    'text!templates/sample.template.html',
    '../../../build/like_button.js'
], function(
    $, _, Backbone,
    ...
    Template
) {
    var AddView = Backbone.View.extend({
    ...
    });

浏览器控制台中的错误现在是：

Uncaught Invariant Violation: Target container is not a DOM element.
    at invariant (https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js:49:15)
    at Object.render (https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js:21286:36)
    at http://localhost:5050/build/like_button.js:35:10

更新2：如果我将domContainer控制台记录到React组件文件中，它将返回null，因此似乎脚本在{{1 }}可用，那么您如何在View的主干代码中准确运行已编译的文件，即domContainer？

将Reactjs类组件添加到现有的主干应用程序

0 个答案: