Question

我有一个父组件，它呈现以下子组件：

            Object.values(eventData).map((event) => {
                return (
                    <EventsSection
                        key={event.id}
                        eventID={event.id}
                        eventDate={event.date}
                    />
                );
            })

假设eventData中有10到20条记录-根据特定的用户操作，我如何基于其EventSection属性使浏览器窗口滚动到key条记录上？

Answer 1

您需要使用ID中的ref。如果用户想单击列表并使浏览器滚动到该ref，则下面的内容就足够了。

function renderEventSection(props) {
  const { key, name } = props
  const ref = useRef()

  const handleClick = () =>
    ref.current.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
    });

  return (
    <div key={key} ref={ref} onClick={handleClick}>
      {name}
    </div>
  )
}

如果需要从列表外部滚动，只需将该逻辑移至父组件或使用React Context（请参见第二个示例）。另外，如果您需要其他事件，只需将其更改为任何其他所需的用户交互即可。

Example for the code above（单击任何“数据”列表项）
Example with the scroll from the parent component（单击任意按钮，窗口将滚动到所需的数字）

如何通过组件键道具滚动到组件？

1 个答案: