首页 文章

在Backbone视图中填充React组件

提问于
浏览 次
3

我收到了一个React错误：

错误：不变违规：_registerComponent（...）：目标容器不是DOM元素 .

我想我知道问题是什么，但我不知道如何解决它 . 问题是我想在render函数中引用div元素id，但渲染函数中的html还没有呈现给DOM，直到我想把东西粘在那个html上 . 所以我的问题是 - 如何在渲染到DOM之前从我的渲染函数中引用html的元素id？这已成为我认为是一个jQuery问题 .

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

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视图中呈现两个独立/不相关/不同的React组件 . 这有一个很好的模式吗？

javascript jquery backbone.js reactjs

2 回答

  • 1

    您在self.el中的第一个render语句正在替换该元素的DOM内容 . 因此，当您进行第二次渲染调用时，＃react-menu-example div不再存在 . 您可以通过渲染到父级内的另一个元素来解决此问题 . 虽然总的来说我认为最好在React中使用尽可能多的模板/渲染，而不是使用骨干视图来进行太多的模板化 .

    以下是在同一骨干视图中呈现两个不同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")
});
    回复于
  • 4

    实际上说是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]
     );
});
    回复于

相关问题