scroll - 如何访问 ref 并以编程方式在 react-beautiful-dnd 中滚动

Question

我想要实现的目标：以编程方式在 react-beautiful-dnd 可删除列中滚动

如果它是一个简单的反应 div，我可以：

const myref = useRef(null)
const executeScroll = () => {
  myref.current.scrollLeft = 1500;
}

return(
  <div>
    <div 
      className={classes.root} 
      **ref={myref}**
    >
        {filteredData.map((spot) => 
          <SpotCard key={spot.place.id} spot={spot}/>
        )}
    </div>
  <button onClick={executeScroll}/>
  </div>
)

但是，在我实现 react-beautiful-dnd 之后，我需要替换 ref

<Droppable 
  droppableId="1"
  direction="horizontal"
>
  {(provided) => (
    <div 
      className={classes.root} 
      **ref={provided.innerRef}**
      {...provided.droppableProps}>
        {filteredData.map((spot, index) => 
          <SpotCard key={spot.place.id} spot={spot} index={index}/>
        )}
        {provided.placeholder}
    </div>
  )}
</Droppable>

我现在如何访问 ref 以编程方式执行滚动？

Answer 1

只需使用您的参考添加另一个 div

const myRef = useRef(null);

return (
  <Droppable droppableId="1">
    {(provided) => (
      <div ref={provided.innerRef} {...provided.droppableProps}>
        <div ref={myRef}>
          {filteredData.map((spot, index) => 
            <SpotCard key={spot.place.id} spot={spot} index={index} />
          )}
        </div>
        {provided.placeholder}
      </div>
    )}
  </Droppable>
);