如何在 React 中高效滚动到元素？

在 React 中高效滚动到元素

在本文中，我们解决了在 React 应用程序中管理滚动行为时面临的常见挑战：确保滚动焦点保持在新加载的元素上元素。我们提出了不同的方法来实现这一点，适用于 React 16.3 和 16.8 。

React 16.8 ，功能组件

利用 useRef 钩子，我们为所需元素创建一个引用。通过调用绑定到该引用的scrollIntoView函数，我们可以平滑地滚动到该元素。

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView(); // scroll to element

  return (
    <>
      <div ref={myRef}>Element to scroll to</div>
      <button onClick={executeScroll}>Click to scroll</button>
    </>
  );
};

React 16.3，类组件

对于类组件，我们可以使用React.createRef创建一个引用()。 executeScroll 方法调用 ref 上的scrollIntoView函数来平滑滚动到所需的元素。

class ReadyToScroll extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.current.scrollIntoView(); // scroll to element
}

Ref Callback

或者，我们可以使用 ref 回调将 ref 附加到元素。此方法可确保将 ref 直接分配给 DOM 元素，而无需创建实例变量。

class ReadyToScroll extends Component {
  render() {
    return <div ref={ref => (this.myRef = ref)}>Element to scroll to</div>;
  }

  executeScroll = () => this.myRef.scrollIntoView(); // scroll to element
}

注意事项

• 避免字符串引用： 字符串引用对性能有影响，React 不鼓励。
• 平滑滚动动画：可以通过在html元素的CSS中添加scroll-behavior: smooth来启用平滑滚动。
• 将引用传递给子组件：将引用传递给子组件时，将其分配给名称不是“ref”的 prop 以避免冲突。

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