反应滚动到元素（ref current is null）问题

Question

我有一个我无法解决的问题。该应用程序有一个组件，其中有一个循环数组并从中生成多个元素。然后我想在另一个组件中制作按钮，该按钮将滚动到特定元素。（单击圆圈时类似于 liveuamap.com）。

我尝试了以下解决方案，但出现“未捕获的类型错误：props.refs 未定义”。我找不到任何解决方案来修复它。

第二个问题：是否有更好或不同的解决方案来使滚动起作用？

在应用程序组件中，我创建了用于滚动的引用和函数：

  const refs = DUMMY_DATA.reduce((acc, value) => {
     acc[value.id] = React.createRef();
     return acc;
   }, {});

   const handleClick = (id) => {
     console.log(refs);
     refs[id].current.scrollIntoView({
       behavior: "smooth",
       block: "start",
     });
   };

我将 refs 作为 prop 发送到文章组件，在其中我使用应用程序组件生成的 refs 渲染元素。

  {props.data.map((article) => (
    <ContentArticlesCard
      key={article.id}
      ref={props.refs[article.id]}
      data={article}
      onActiveArticle={props.onActiveArticle}
      activeArticle={props.activeArticle}
    />
  ))}

该函数作为 prop 发送到另一个组件，我在其中使用相同的数据创建按钮，并添加了滚动到文章组件中特定项目的功能。

{props.data.map((marker) => (
      <Marker
        position={[marker.location.lat, marker.location.lng]}
        icon={
          props.activeArticle === marker.id ? iconCircleActive : iconCircle
        }
        key={marker.id}
        eventHandlers={{
          click: () => {
            props.onActiveArticle(marker.id);
            // props.handleClick(marker.id);
          },
        }}
      ></Marker>
))}

感谢您的回答。

Answer 1

好的，所以我在库 react-scroll 中找到了简单滚动实现的解决方案。

反应滚动到元素（ref current is null）问题

React scroll to element (ref current is null) problem

reactjs

react-leaflet