React无限滚动scrollableTarget动态获取id? [英] React infinite scroll scrollableTarget get id dynamically?

问题描述

我在我的项目中使用 react-infinite-scroll-component.如何让 scrollableTarget 动态获取项目 ID?我试过这样 scrollableTarget={item.id} 但它没有用.必须与此 div 具有相同的 id id={item.id}

const Podcast = ({className, data, hasChild}) =>{...返回 
<无限卷轴数据长度={state.list.length}下一个={fetchMoreData}hasMore={state.hasMore}加载程序={
正在加载...
}scrollableTarget={accordion__panel-1"}>{state.list &&state.list.map((item,i)=>{返回 
<div className={classNames('podcast', className)} ><div key={item.id} >...
{hasChild &&<div id={item.id}><无限卷轴dataLength={stateChild.children.length}下一个={fetchMoreDataChildren}hasMore={stateChild.hasMoreChildren}loader={
Loading4...
}scrollableTarget={item.id}>{ stateChild.children &&stateChild.children.map((child, j) => (<div className={classNames('podcast')}><div key={child.id} className=播客--内容">...

))}</InfiniteScroll></div>}

})}</InfiniteScroll>

;}

解决方案

问题是这样解决的scrollableTarget={item.id.toString()}

I use react-infinite-scroll-component in my project. How can I make scrollableTarget dynamically get item id? I've tried like this scrollableTarget={item.id} but it didn't work. Must have the same id as this div id={item.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>;
  }

解决方案

the problem is solved like this scrollableTarget={item.id.toString()}

这篇关于React无限滚动scrollableTarget动态获取id?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！