在 React 中滚动到一个元素

1. 使用 React 中的 Element.scrollIntoView() 方法滚动到一个元素
2. 滚动到带有 React Refs 的元素（参考）

现代互联网充满了各种类型的文本。很多时候，你必须滚动才能找到你要找的东西。然而，滚动无休止的提要可能会令人沮丧并且是一种糟糕的用户体验实践。一种解决方案是创建目录。

React 框架提供了一种更好的方法来实现相同的结果。你可以自动或通过单击按钮来引用一个元素并滚动到它。检测用户正在寻找什么并立即显示它可以提高你的应用程序或网站的用户友好性。

有多种方法可以实现此功能。根据你使用的组件类型（功能与类），你必须选择合适的组件。

尽管如此，每个实现都由两个部分组成：HTML 元素接口提供的 Element.scrollIntoView() 方法和 React refs（引用的缩写），可以使用 useRef() 钩子（用于功能组件）创建，或 createRef() 方法（用于类组件）。

使用 React 中的 Element.scrollIntoView() 方法滚动到一个元素

如前所述，此方法可确保滚动向上或向下移动以显示调用它的任何元素。

element.scrollIntoView() 只能接受一个参数。它可以是一个 alignToTop 布尔值或 options 对象。

alignToTop

传递 true 布尔值将导致元素与可滚动父元素的顶部对齐。

传递 false 值将使元素与可滚动父元素的底部对齐。

Options

此参数表示为一个对象，但允许你自定义和更改方法的默认设置。

该对象可以具有三个可选属性。如果它们不存在，设置将恢复为默认值。

1. behavior 属性允许你自定义过渡。默认情况下，它设置为 auto。它可以设置为 smooth，这是一个更好看的动画。
2. block 属性允许你垂直定位元素。它可以取 start、center、end 或 nearest 的值。start 是默认设置。
3. inline 属性允许你水平定位元素。它可以取 start、center、end 或 nearest 的值。nearest 是默认设置。

浏览器支持

所有主要浏览器都支持 element.scrollIntoView() 方法本身。然而，一些旧的浏览器会忽略传递给它的 options 参数。根据 caniuse.com，全球只有约 76% 的用户拥有支持此参数的浏览器。该网站将其描述为一项实验性功能。

滚动到带有 React Refs 的元素（参考）

React 中的 Refs 有许多不同的应用。最常见的用途之一是引用 DOM 中的元素。通过引用元素，你还可以访问元素的接口。这对于捕获我们要滚动到的元素至关重要。

可以通过将元素的 ref 属性设置为引用实例来引用元素。下面是代码示例：

const testDivRef = useRef(null);
<div className="testDiv" ref={testDivRef}></div>

在这里，<div> 元素是我们想要滚动到视图中的元素。你也可以在任何其他 HTML 元素上使用 react 引用。

<h1 ref={testDivRef}>Title</h1>

引用对象的 current 属性保存实际元素。如果我们将 testDivRef.current 记录到控制台，我们会得到以下结果：

下面是完整的解决方案。

在功能组件中：

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

在类组件中：

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref={this.testRef}>Element you want in view</div>;
  }
}

其他提示

current 属性只有在组件安装后才能访问。

最好在 useEffect() 回调或等价物（这是类组件的 componentDidMount() 生命周期方法）中引用该属性。

useEffect(() => console.log(testRef.current), [])

你还可以在继续之前有条件地检查 ref.current 是否等于 true。

if(testRef.current){
testRef.current.scrollIntoView()
}

你可以设置要通过单击按钮来触发的滚动。这样，你可以确保在安装按钮和应该查看的组件后执行滚动。

<button onClick={scrollToElement}>Trigger the scroll</button>

捆绑解决方案

名为 react-scroll-to-component 的 NPM 包专门用于将此功能作为捆绑解决方案提供。使用 npm 或 yarn 安装很容易。

要了解有关此软件包的更多信息，请阅读文档。