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