Javascript 在主干视图中填充组件

我收到一个React错误：

错误：不变冲突：_registerComponent（…）：目标容器 不是DOM元素

我想我知道问题是什么，但我不知道如何解决它。问题是我想在render函数中引用一个div元素id，但在我想将某些内容粘贴到该html中时，render函数中的html还没有被呈现到DOM中。所以我的问题是-在呈现给DOM之前，如何从呈现函数中引用html的元素id？这已经成为我认为的jQuery问题

以下是简单主干的渲染函数中的代码。视图：

     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?
     );

---

我的主心骨。有问题的观点是创建自己的el。我试图做的可能是完全不正常的-我只想在同一个主干视图中呈现两个独立/不相关/不同的React组件。这有一个好的模式吗？

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

$（文档）.ready（函数（）{
反应(
,
$（'#反应菜单示例div id'）[0]
);
});

您在self.el中的第一个render语句将替换该元素的DOM内容。因此，在进行第二次渲染调用时，#react menu example div已不存在。您可以通过仅渲染到父级中的另一个元素来修复此问题。虽然一般来说，我认为最好在React中使用尽可能多的模板/渲染，而不要使用主干视图来进行太多的模板制作

下面是一个在同一主干视图中渲染到两个不同ID的示例

模板

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

a

JS

var Hello=React.createClass({
render:function（）{
返回（{this.props.start}）
}
});
var Hello2=React.createClass({
render:function（）{
返回（拉拉）
}
});
var SearchView=Backbone.View.extend({
初始化：函数（）{
这个。render（）；
},
渲染：函数（）{
var template=35;.template（$（“#搜索_模板”）.html（），{}）；
这个.$el.html（模板）；
反应(
,
$（'#占位符1'）[0]
);
反应(
,
$（'#反应菜单示例div id'）[0]
);
}
});
var search_view=新建SearchView({
el:$（“搜索容器”）
});

您不能执行

$（self.el）。查找（'react menu example div id'）[0]

？也许吧。我明天试试。jquery find函数可以搜索不在DOM中的HTML？是的：虽然jquery是这样，但它仍然不起作用，正如noveyak在下面的回答中解释的那样。@HannesJohansson是的，这很有效，谢谢。jQuery的find（）函数似乎能够找到DOM中还没有的HTML元素，非常方便。我认为实际上您需要使用jQuery的find（）函数，比如：$（this.el）.find（'#placeholder 1'）[0]，我认为上面的方法不会起作用，因为模板还不在DOM中，$（'#age'））将只在真实的DOM中查看，您能确认吗？查看此问题和答案以了解更多信息。我相信$el.html（模板）将其放置在DOM中。检查我的JSFIDLE，您可以看到在不同的附加点中呈现的2个react视图。啊，是的，它将把它放在DOM中，因为您在新的SearchView（{el:…}）中传递了el。但是，如果您有兴趣了解一些新内容，请单击上面的链接，如如何jQuery.find（）如果您的父视图创建了自己的el，则可以帮助您解决此问题

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

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")
});