在React组件中实现大文本内容滚动至指定位置的教程_技术教程

本教程详细介绍了如何在react组件中处理大量文本的渲染与高亮，并实现滚动到特定文本的功能。文章涵盖了react组件的文本映射、使用第三方高亮库、以及通过vanilla javascript进行dom操作来计算元素位置并实现平滑滚动的集成方案，最终提供了一个完整的react类组件示例，展示了如何结合用户输入实现精准定位。

在现代Web应用中，展示和管理大量文本内容是常见需求。特别是在文档查看器或代码编辑器等场景中，用户可能需要快速定位到文本中的某个特定短语或单词。本教程将指导您如何在React组件中实现这一功能：渲染逐行文本，使用高亮库标记关键词，并最终通过编程方式将页面滚动到第一个匹配的文本实例。

1. React组件中的文本渲染与高亮

首先，我们来构建一个React组件，它能够逐行渲染文本文件内容，并利用第三方库react-highlight-words来实现关键词高亮。

假设我们有一个文本数组，其中每项代表一行文本。我们将这些行映射到单独的

元素中，并在其中嵌套Highlighter组件。

import React from 'react';
import Highlighter from 'react-highlight-words';

// 假设 contractText 是一个字符串数组，每项代表一行
// queryWords 是一个字符串，包含需要高亮的关键词
class TextViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contractText: props.textData || [], // 从props获取文本数据
      queryWords: '', // 用于高亮的关键词
      searchText: '' // 用户在输入框中输入的搜索文本
    };
    this.textContainerRef = React.createRef(); // 用于获取文本容器的DOM引用
  }

  // ... (后续方法和渲染逻辑)

  render() {
    const { contractText, queryWords } = this.state;
    return (
      
        {contractText.map((line, index) => (
          
             word)} // 将搜索词分割成数组
              autoEscape={true}
              textToHighlight={line}
            />
          
        ))}
      
    );
  }
}

在上述代码中：

contractText 存储了要显示的文本内容，通常通过props传入。
queryWords 状态用于控制Highlighter组件高亮哪些词语。当用户搜索时，我们会更新这个状态。
Highlighter组件接收searchWords（一个字符串数组）和textToHighlight（要高亮的文本）。它会自动找到并高亮匹配的词语。
textContainerRef 是一个React Ref，用于获取包含所有
元素的父div的DOM引用，这在后续的滚动逻辑中会用到。

2. 实现滚动到指定文本的核心逻辑

要实现滚动到特定文本，我们需要直接与DOM交互，获取目标元素的位置，然后调用浏览器提供的滚动API。由于React通常不直接操作DOM，我们会将这些逻辑封装在组件方法中，并在适当的时机（例如用户点击搜索按钮后）调用它们。

2.1 获取元素的绝对位置

首先，我们需要一个辅助函数来计算任何给定元素的绝对垂直偏移量（相对于文档顶部）。

/**
 * 获取元素的文档绝对偏移量。
 * @param {HTMLElement} el - 要获取偏移量的DOM元素。
 * @returns {{left: number, top: number}} 包含元素左侧和顶部偏移量的对象。
 */
function getOffset(el) {
  const rect = el.getBoundingClientRect(); // 获取元素相对于视口的位置
  return {
    left: rect.left + window.scrollX, // 加上当前水平滚动量，得到文档绝对左侧位置
    top: rect.top + window.scrollY // 加上当前垂直滚动量，得到文档绝对顶部位置
  };
}

2.2 查找文本并滚动

接下来，我们将实现一个函数，它遍历页面上的所有

元素，查找包含指定文本的第一个元素，然后将窗口滚动到该元素的位置。

/**
 * 查找指定文本并滚动到第一个匹配的元素。
 * @param {string} searchText - 要查找的文本。
 * @param {HTMLElement} containerElement - 限制搜索范围的容器元素（可选）。
 */
function findTextAndScroll(searchText, containerElement = document) {
  if (!searchText) {
    console.warn("搜索文本不能为空。");
    return;
  }

  // 在指定的容器内查找所有元素
  const paragraphs = containerElement.querySelectorAll("p");

  for (const pElement of paragraphs) {
    // 检查段落的文本内容是否包含搜索文本（大小写敏感，可根据需求调整）
    if (pElement.textContent.includes(searchText)) {
      const offset = getOffset(pElement);
      // 使用 window.scrollTo 实现平滑滚动到元素的顶部
      window.scrollTo({
        top: offset.top - 50, // 减去一个偏移量，确保元素不会紧贴视口顶部，提供更好的阅读体验
        behavior: 'smooth' // 启用平滑滚动效果
      });
      return pElement; // 找到第一个并滚动后即返回，停止进一步查找
    }
  }
  console.warn(`文本 "${searchText}" 未找到。`);
  return null;
}

关键点：

containerElement.querySelectorAll("p")：通过传入一个容器元素，我们可以将搜索范围限制在组件内部，而不是整个文档，这更符合React组件的封装性。
pElement.textContent.includes(searchText)：使用textContent比innerHTML更安全，因为它只获取纯文本内容，避免了HTML标签的影响。
window.scrollTo({ top: offset.top - 50, behavior: 'smooth' })：这是实现滚动到指定位置的核心API。top指定了滚动到的垂直位置，behavior: 'smooth'则提供了平滑的动画效果。我们减去了50像素，是为了让目标元素在视口顶部留出一些空间，避免被导航栏等遮挡。

3. 在React组件中集成滚动功能

现在，我们将上述滚动逻辑集成到我们的TextViewer React类组件中。我们需要添加一个输入框让用户输入搜索文本，一个按钮来触发搜索和滚动，并在搜索成功时更新queryWords状态以高亮文本。

import React from 'react';
import Highlighter from 'react-highlight-words';

// 辅助函数 (可放置在组件外部或组件内作为静态方法)
function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

class TextViewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contractText: props.textData || [],
      queryWords: '', // 用于Highlighter高亮的词语
      searchText: '' // 用户输入框中的搜索词
    };
    this.textContainerRef = React.createRef(); // 文本内容的容器引用
  }

  /**
   * 查找文本并滚动到第一个匹配的元素。
   * 此方法现在是组件的一部分，并利用了组件的ref。
   */
  findTextAndScroll = () => {
    const { searchText } = this.state;
    if (!searchText) {
      console.warn("搜索文本不能为空。");
      this.setState({ queryWords: '' }); // 清除高亮
      return;
    }

    // 确保textContainerRef.current存在，即组件已挂载
    const container = this.textContainerRef.current;
    if (!container) {
      console.error("文本容器Ref未找到。");
      return;
    }

    const paragraphs = container.querySelectorAll("p");
    let foundElement = null;

    for (const pElement of paragraphs) {
      if (pElement.textContent.includes(searchText)) {
        foundElement = pElement;
        break; // 找到第一个匹配项后立即停止
      }
    }

    if (foundElement) {
      const offset = getOffset(foundElement);
      window.scrollTo({
        top: offset.top - 50,
        behavior: 'smooth'
      });
      // 滚动成功后，更新queryWords状态以高亮找到的文本
      this.setState({ queryWords: searchText });
    } else {
      console.warn(`文本 "${searchText}" 未找到。`);
      this.setState({ queryWords: '' }); // 清除高亮
    }
  };

  /**
   * 处理搜索输入框的onChange事件。
   */
  handleSearchInputChange = (event) => {
    this.setState({ searchText: event.target.value });
  };

  render() {
    const { contractText, queryWords, searchText } = this.state;
    return (
      
        {/* 搜索输入框和按钮 */}
        
          
          
        

        {/* 文本内容显示区域 */}
        
          {contractText.length > 0 ? (
            contractText.map((line, index) => (
              
                 word)}
                  autoEscape={true}
                  textToHighlight={line}
                />
              
            ))
          ) : (
            没有可显示的文本内容。
          )}
        
      
    );
  }
}

export default TextViewer;

使用说明：

确保您的项目中已安装react-highlight-words：npm install react-highlight-words 或 yarn add react-highlight-words。

将TextViewer组件引入您的应用，并传入textData属性，例如：

// App.js 或其他父组件
const myTextData = [
  "这是一段示例文本，用于演示滚动功能。",
  "第二行文本，包含了一些关键词。",
  "第三行，让我们尝试查找'关键词'或'滚动'。",
  "文本内容可以非常长，这里只是一小部分。",
  "请注意，滚动会定位到第一个匹配的段落。"
];

function App() {
  return (
    
      文本查看器
      
    
  );
}