栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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);


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/409775.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号