好的,您的问题尚不清楚,但是用HTML生成的内容 表示 的数据将与通过AJAX获取的数据 完全 不同。
有一个简单的解决方案。与创建与原始DOM布局相邻的全新DOM元素不同,您要做的是获取已经存在的数据,将其存储到数组中,然后将要通过AJAX捕获的新数据附加到该数组中。数组。这样,您将获得React的DOM差异的好处。为什么有用?也许您想让用户对数据进行排序或直接与数据进行交互,而同时它仍将完全由父React组件控制。
所以无论如何,看看这个小提琴:https ://jsfiddle.net/x4jjry04/3/。它基于Paul Booblic的小提琴。
var Page = React.createClass({
getDefaultProps: function () {
return {
items: []
}
},
getInitialState : function(){
return{
items : this.props.items
}
},
componentDidMount: function () {
// Mimics an AJAX call, but replace this with an actial AJAX call.
setTimeout(function () {
var dataFromAjax = ['one', 'two', 'three'];
this.setState({
items: this.state.items.concat(dataFromAjax)
});
}.bind(this));
},
addClick : function(){
this.state.items.push("more");
this.forceUpdate();
},
render : function(){
return <div>{this.state.items.map(function(item){return <div className="bla-bla-class">{item}</div>})}<br/><div onClick={this.addClick}>ADD</div></div>;
}
});
var elements = document.querySelectorAll('.item-list__child-item');
var initialvalues = Array.prototype.slice
.call(elements)
.map(function (div) {
return div.innerHTML;
});
React.render(<Page items={initialvalues} />, document.body);