在 Backbone 视图中填充 React 组件

Question

我收到 React 错误：

Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

我想我知道问题出在哪里，但我不知道如何解决。问题是我想在渲染函数中引用一个 div 元素 id，但是渲染函数中的 html 还没有渲染到 DOM 到我想要的时候把东西塞进去 html。所以我的问题是——在将 html 渲染到 DOM 之前，如何从我的渲染函数中引用它的元素 ID？这已成为我认为的 jQuery 问题。

这是一个简单 Backbone.View 的渲染函数中的代码：

     var self = this;

     var ret = EJS.render(template, {});

     this.$el.html(ret); //nice, but hasn't been rendered to the DOM yet

     React.render(
        <TimerExample start={Date.now()} />,
         self.el    //this works no problemo
    );

     React.render(
       <MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
       $('#react-menu-example-div-id')[0]  //this is *not* working, what is the right call here, so that this view can coexist with the above React view?
     );

如果第一个 React.render 调用本身有效。但是第二个 React.render 不起作用，是抛出错误的那个。

我的模板是这样的：

<div>
    <div id="react-menu-example-div-id">menu example goes here</div>
</div>

我的 Backbone.View 有问题正在创建自己的 el。我正在尝试做的事情可能会很糟糕——我只想在同一个 Backbone 视图中渲染两个 separate/unrelated/different React 组件。有好的模式吗？

Answer 1

实际上是说 ID 为 'react-menu-example-div-id' 的元素尚未出现在页面上。

我可以观察到您正在使用 jquery，那为什么不呢：

$(document).ready(function() {
React.render(
       <MenuExample items={ ['Home', 'Services', 'About', 'Contact us'] } />,
       $('#react-menu-example-div-id')[0]
     );
});

Answer 2

您在 self.el 中的第一个渲染语句正在替换该元素的 DOM 的内容。因此，当您进行第二次渲染调用时，#react-menu-example div 不再存在。您可以通过渲染到父元素中的另一个元素来解决这个问题。尽管总的来说我认为最好在 React 中尽可能多地使用 templating/rendering 并且不要将 backbone 视图用于过多的模板。

这是在同一 backbone 视图中呈现两个不同 ID 的示例

https://jsfiddle.net/sa4vvtjL/2/

模板

<div id="search_container">a</div>

<script type="text/template" id="search_template">
    <div>
        <div id="placeholder1"></div>
        <div id="react-menu-example-div-id"></div>
    </div>
</script>

JS

var Hello = React.createClass({
    render: function(){
        return (<div> {this.props.start} </div>)
    }
});

var Hello2 = React.createClass({
    render: function(){
        return (<div> lala </div>)
    }
});

var SearchView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    render: function () {
        var template = _.template($("#search_template").html(), {});
        this.$el.html(template);

        React.render(
            <Hello start={Date.now()} />,
            $('#placeholder1')[0] 
        );

        React.render(
            <Hello2  />,
            $('#react-menu-example-div-id')[0] 
        );

    }
});

var search_view = new SearchView({
    el: $("#search_container")
});

在 Backbone 视图中填充 React 组件

Stuffing React component in Backbone view

javascript

jquery

backbone.js

reactjs