反应无限滚动scrollableTarget动态获取ID?

时间:2020-09-23 21:06:33

标签: javascript reactjs rxjs

我在项目中使用react-infinite-scroll-component。如何使scrollableTarget动态获取项目ID?我已经尝试过像scrollableTarget={item.id}这样,但是没有用。必须与此div id={item.id}

具有相同的ID
const Podcast = ({className, data, hasChild}) => {     
     ... 
    return <div>
         <InfiniteScroll
                dataLength={state.list.length}
                next={fetchMoreData}
                hasMore={state.hasMore}
                loader={<h4>Loading...</h4>}
                scrollableTarget={"accordion__panel-1"}
                >
        {state.list && state.list.map((item,i)=>{
            return <div>    
            <div className={classNames('podcast', className)} >
                <div key={item.id} >
                ...
                
               </div>
            {hasChild && <div id={item.id}>
            <InfiniteScroll
                    dataLength={stateChild.children.length}
                    next={fetchMoreDataChildren}
                    hasMore={stateChild.hasMoreChildren}
                    loader={<h4>Loading4...</h4>}
                    scrollableTarget={item.id}
                    >
            { stateChild.children && stateChild.children.map((child, j) => (        
                    <div className={classNames('podcast')}>
                        <div key={child.id} className="podcast--content">
                          ...
                        </div>
                    </div>
                ))}
                </InfiniteScroll>
            </div>}
        </div>
        </div>
        })}
        </InfiniteScroll>
    </div>;
  }

1 个答案:

答案 0 :(得分:0)

像这样scrollableTarget={item.id.toString()}

解决了问题