反应无限滚动

问题描述

我正在尝试使用 react 组件进行无限滚动，我尝试使用 react-infinite-scroll-component npm 包，但它似乎不适合我的项目。

我需要有 2 个 map 函数来显示无限滚动的内容才能看起来像这样：https://i.imgur.com/qtNM3qd.png

左侧内容有 1 张地图，右侧内容有 1 张地图。

当我尝试将 npm 包与两个地图一起使用时，cols 停止工作，第二个地图位于另一个地图下方。

这是代码。我想知道 npm 包是否有解决方案，如果没有，是否可以从头开始或者我的 2 个地图设置会阻止我？

            <div className="col-lg-6 mb-5 mb-lg-0 nopaddingLeft">
          ----> 1 map    {results.map((item,index) => {
                return (
                  <div key={index}>
                    {item.map((subitem,i) => {
                      if (i === 0) {
                        return (
                          <BigCard
                            key={i}
                            article={subitem}
                            authors={authors}
                          />
                        );
                      }
                    })}
                  </div>
                );
              })}
            </div>

            <div className="col-lg-6 pl-lg-4 nopaddingRight">
         ----> 2 map  {results.map((item,i) => {
                      if (i !== 0) {
                        return <LilCard key={i} article={subitem} />;
                      }
                    })}
                  </div>
                );
              })}
            </div>
          </div> 

谢谢各位。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）