如何滚动到 React 中的某个元素？

在 React 中滚动到某个元素

在 React 中，开发人员可能会遇到想要动态滚动到特定元素的情况，例如在聊天小部件中新添加的元素加载的消息应该成为焦点。为了实现这一点，可以采用多种技术：

React 16.8，功能组件

利用 useRef 钩子，您可以创建对要滚动到的元素的动态引用：

const myRef = useRef(null);

const executeScroll = () => myRef.current.scrollIntoView();

建立引用后，您可以从事件处理程序或效果中调用executeScroll() 函数来执行滚动。

React 16.3 ，类组件

对于类组件，您有两个选项：

选项 1：使用 createRef

constructor(props) {
  super(props)
  this.myRef = React.createRef()  
}

选项 2：引用回调

render() {
  return <div ref={ (ref) => this.myRef=ref }></div>
}

在这两种情况下，您都可以使用 this.myRef.scrollIntoView() 滚动到元素。

注意事项

• 避免使用字符串引用，因为它们已被弃用并且会影响性能。
• 通过将以下 CSS 添加到文档来启用平滑滚动：

html {
  scroll-behavior: smooth;
}

将引用传递给子组件

如果您想要的元素要滚动到位于子组件中，您可以使用以下技术：

const MyComponent = () => {
  const myRef = useRef(null)
  return <ChildComponent refProp={myRef}></ChildComponent>
}

const ChildComponent = (props) => {
  return <div ref={props.refProp}></div>
}

以上是如何滚动到 React 中的某个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！