反应无限滚动的孩子和标签

时间:2020-09-23 15:31:36

标签: javascript reactjs rxjs

有一个选项卡组件,每个选项卡中的元素都有自己的拖放内容,例如手风琴。我使用了无限滚动组件,因为可能会有很多数据。但是,当我滚动一个选项卡时,将像滚动另一个选项卡一样加载元素。而且我必须为元素的子元素使用无限滚动,但是我不知道该怎么做。这里的代码可以帮我吗?


import React, {useState}  from 'react';
import PropTypes from 'prop-types';
import classNames from "classnames";
import Select from '../Select';
import InfiniteScroll from "react-infinite-scroll-component";

const Podcast = ({className, data, hasChild}) => {    
      const [state, setState] = useState({
        list : data.slice(0,5) ,
        hasMore : true 
      });
       
    function fetchMoreData() {
        let listLen = state.list.length
        let dataLen = data.length 
        let hm = true;
        if(dataLen > (listLen + 2)){
            listLen = listLen + 2
            hm=true
        } else {
            listLen = dataLen
            hm = false
        }

        setTimeout(() => {
            setState({     
                list: data.slice(0, listLen),
                hasMore : hm
            });
        },1500);
    }

    return <div>
         <InfiniteScroll
                dataLength={state.list.length}
                next={fetchMoreData}
                hasMore={state.hasMore}
                loader={<h4>Yükleniyor...</h4>}
                >
        
        {state.list && state.list.map((item,i)=>{
            return <div>    
            <div className={classNames('podcast', className)} >
                <div key={item.id} >
                {hasChild && <i className="icon-triangle"></i>}
                
               ...
            </div>
            {hasChild && <div>
            { item.children.map((child, j) => (
                    <div className={classNames('podcast')}>
                        <div key={child.id} className="podcast--content">
                          ...
                        </div>
                    </div>
                ))}
            </div>}
        </div>
        
        </div>
        })}
        </InfiniteScroll>
    </div>;
  }
  
  Podcast.propTypes = {
    className: PropTypes.string,
    publisher: PropTypes.string,
    title: PropTypes.string,
    status: PropTypes.string
  };
  
  export default Podcast;
  

0 个答案:

没有答案