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

Question

我有一个渲染以下子组件的父组件：

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

假设有 10-20 条记录eventData- 在某个用户操作后，我如何使浏览器窗口EventSection根据其属性滚动到记录上key？

标签： reactjs

Answer 1

您需要使用ref来自 id 的 a。如果用户想要单击列表并使浏览器滚动到该列表，则类似下面的内容就足够了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 上下文（参见第二个示例）。此外，如果您需要另一个事件，只需将其更改为任何其他所需的用户交互。

• 上述代码示例（单击任何数据列表项）
• 从父组件滚动的示例（单击任何按钮，窗口将滚动到所需的数字）