您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

好的,您的问题尚不清楚,但是用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);
其他 2022/1/1 18:18:10 有651人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶