ReactJS组件渲染以及如何将元素追加到安装组件的div上

小编典典

ReactJS组件渲染以及如何将元素追加到安装组件的div上

reactjs

我有一个用例，页面上有一个“加载更多”按钮，可以从API端点获取更多项，因此我希望这些项在到达时附加到DOM上。事实是，Web服务器提供的HTML页面在同一item- listdiv容器中带有一些额外的列表项（如下所示），我在页面加载时将我的React组件（空数据/属性）装入了我的React组件。

<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’div组件所在的位置。

我认为可以使用并且不依赖同构的东西并在服务器上预渲染react组件的一种快速解决方法是，创建一个具有相同div类名“ item-
list”的单独的兄弟div。并添加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概念及其工作原理。无论如何，您会对此有任何指示。

阅读 808

2020-07-22

共1个答案

小编典典

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

2020-07-22