好的,您的问题尚不清楚,但是用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);


