React.render替换容器而不是插入

我正在逐步用React替换一些Backbone视图。

我的React视图:

<div id="reactViewContent">Rendered By React</div>

我需要在其他html元素下方呈现React视图而不替换它们。

<div id="somestuff">

<div id="anotherView">Other stuff not to delete</div>

<div id="placeholderForReactView"></div>

</div>

我希望我的方法可以替换占位符,而不是插入占位符,以便:

React.render(React.createElement(MyTestReactView), document.getElementById('placeholderForReactView'));

可能导致:

<div id="somestuff">

<div>Other stuff not to delete</div>

<div id="reactViewContent">Rendered By React</div>

</div>

代替:

<div id="somestuff">

<div>Other stuff not to delete</div>

<div id="placeholderForReactView">

<div id="reactViewContent">Rendered By React</div>

</div>

</div>

没有重复出现在Jquery上,有没有正确的方法呢?

回答:

您不需要jQuery来解决此问题。

您只需要渲染到临时DIV中并提取内容并替换现有元素即可。我添加了,id="destination"以便可以轻松地从临时元素中检索该元素。

var Hello = React.createClass({

render: function() {

return <div id="destination">Hello {this.props.name}</div>;

}

});

// temporary render target

var temp = document.createElement("div");

// render

React.render(<Hello name="World" />, temp);

// grab the container

var container = document.getElementById("container");

// and replace the child

container.replaceChild(temp.querySelector("#destination"), document.getElementById("destination"));

以上是 React.render替换容器而不是插入 的全部内容, 来源链接: utcz.com/qa/400351.html

回到顶部