ReactJS组件呈现以及如何将元素附加到组件所安装的div上

Question

我正在使用这个用例,页面上有一个"加载更多"按钮,用于从API端点获取更多项目,因此我希望这些项目在到达时附加到DOM.问题是,Web服务器提供的HTML页面附带了一些额外的列表项(如下所示),在item-list我装载我的React组件的同一div容器中,在页面加载时使用空数据/道具.

<div class="item-list">
  <div class="item-list__child-item"></div>
  <div class="item-list__child-item"></div>
  ...
  <div class="item-list__child-item"></div>
</div>

我的假设是,如果我以ReactJS方式处理这个问题,只要我从服务器(REST)获取更多项目并将这些项目附加到'itemList'状态数组,react就会以某种方式替换所有包含该内容的内容. item-list'dc安装组件的位置.

我正在考虑的一个快速的解决方法是工作,并且它不依赖于同构的东西并预先渲染服务器上的react组件,就是创建一个单独的兄弟div,它具有相同的div类名'item-list'并添加一个id属性来安装组件,因此生成的HTML将如下所示:

<div class="item-list">
  <div class="item-list__child-item"></div>
  <div class="item-list__child-item"></div>
  ...
  <div class="item-list__child-item"></div>
</div>

<div class="item-list" id="react-component-name"></div>

也许有一种更简洁的方法可以做到这一点而不会进入同构的东西,或者我可能不理解React概念及其工作原理.无论如何,我们将非常感谢您对此有任何指示.

Answer 1

好的,您的问题并不清楚,但HTML中生成的数据所代表的数据与您通过AJAX获得的数据完全不同.

有一个简单的解决方案.你要做的就是抓住已经存在的数据,将它存储到一个数组中,并将你将通过AJAX获取的新数据附加到其中,而不是创建一个与原始DOM布局相邻的全新DOM元素.阵列.这样,您将获得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);