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

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 (
      <div ref={this.textContainerRef} style={{ maxHeight: '600px', overflowY: 'auto', border: '1px solid #ccc', padding: '15px' }}>
        {contractText.map((line, index) => (
          <p key={index}>
            <Highlighter
              highlightClassName="MyHC"
              highlightStyle={{ backgroundColor: "#ffd500" }}
              searchWords={queryWords.split(' ').filter(word => word)} // 将搜索词分割成数组
              autoEscape={true}
              textToHighlight={line}
            />
          </p>
        ))}
      </div>
    );
  }
}

/**
 * 获取元素的文档绝对偏移量。
 * @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 // 加上当前垂直滚动量，得到文档绝对顶部位置
  };
}

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

  // 在指定的容器内查找所有<p>元素
  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;
}

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 (
      <div>
        {/* 搜索输入框和按钮 */}
        <div style={{ marginBottom: '20px', padding: '10px', borderBottom: '1px solid #eee' }}>
          <input
            type="text"
            value={searchText}
            onChange={this.handleSearchInputChange}
            placeholder="输入要查找的文本..."
            style={{ marginRight: '10px', padding: '8px', border: '1px solid #ccc', borderRadius: '4px', width: '250px' }}
          />
          <button onClick={this.findTextAndScroll} style={{ padding: '8px 15px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
            查找并滚动
          </button>
        </div>

        {/* 文本内容显示区域 */}
        <div ref={this.textContainerRef} style={{ maxHeight: '600px', overflowY: 'auto', border: '1px solid #ccc', padding: '15px', lineHeight: '1.6' }}>
          {contractText.length > 0 ? (
            contractText.map((line, index) => (
              <p key={index} style={{ margin: '0 0 8px 0' }}>
                <Highlighter
                  highlightClassName="MyHC"
                  highlightStyle={{ backgroundColor: "#ffd500", fontWeight: 'bold' }}
                  searchWords={queryWords.split(' ').filter(word => word)}
                  autoEscape={true}
                  textToHighlight={line}
                />
              </p>
            ))
          ) : (
            <p>没有可显示的文本内容。</p>
          )}
        </div>
      </div>
    );
  }
}

export default TextViewer;