使用react实现一个瀑布流的组件，包含

加载 答： ```javascript import React, { Component } from 'react'; import './style.css'; class Waterfall extends Component { constructor(props) { super(props); this.state = { dataList: [], // 数据列表 pageNo: 1, // 当前页码 pageSize: 10, // 每页数量 isLoadingMore: false, // 是否正在加载更多数据中... hasMoreData: true // 是否还有更多数据可以加载 }; } componentDidMount() { // 组件初始化时只调用，以后不再调用 this.loadData(); // 获取数据 } loadData() { // 获取数据的方法 const _this = this; // 先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。 if (this.state.isLoadingMore) return false;// 如果正在加载中就不再执行下面的了。 if (!this.state.hasMoreData) return false;// 如果已经是最后一页了就不再执行下面的了。 _this._getList();// 这里假装我们已经通过ajax请求到了新的list（当然剩余部分就是你去实现如何通过ajax来请求新的list而已啦~） } _getList() { let pageNo = this.state.pageNo; let list = [1,2,3]; let newList = list; let hasMoreData = true; if (pageNo >= 3) hasMoreData = false; this.setState({ dataList: [...this.state.dataList,...newList], pageNo : pageNo + 1, isLoadingMore : false , hasMoreData : hasMoreData }); } render(){ return ( <div className="waterfall"> <div className="waterfall-container"> { this._renderItem() } </div> <div> { !this._hasmore() && "no more data" } { this._showLoadingTips() } </div> </div> ) } _renderItem(){ const listItems=[] ; for (let i=0 ;i< this . state . dataList . length ;i++){ listItems . push (< div key={i} > item{i}</ div > ); }; return listItems ; }; _hasmore(){ return !(!this . state . isLoadingMore && !t his . state . hasMo reDa ta ); };_showLoadingTips(){ if(!t his ._ha smo re())re turn nu ll ; else retu rn (< div > loading ...</ div > ); }}export default Waterfall ;```