React应用中实现文本高亮与精准滚动定位的策略与实践

import React from 'react';
import Highlighter from 'react-highlight-words'; // 假设使用 react-highlight-words

class TextDisplayComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contract: {
        text: [
          "这是第一句话，包含一些特定词汇。",
          "这是第二句话，其中有另一个需要高亮的词。",
          "第三句话，快速的棕色狐狸跳过懒惰的狗。",
          "这里还有一些需要高亮的特定词汇。",
          "最后一句话，用于测试滚动功能。"
        ]
      },
      queryWords: ["特定词汇", "狐狸"] // 示例查询词
    };
  }

  render() {
    const { contract, queryWords } = this.state;
    return (
      <div style={{ maxHeight: '400px', overflowY: 'auto', border: '1px solid #ccc', padding: '10px' }}>
        <h1>文本内容展示</h1>
        {contract.text.map((line, index) => (
          <p key={index} style={{ marginBottom: '10px', lineHeight: '1.5' }}>
            <Highlighter
              highlightClassName="my-highlight-class" // 自定义高亮类名
              highlightStyle={{ backgroundColor: "#ffd500" }} // 自定义高亮样式
              searchWords={queryWords}
              autoEscape={true}
              textToHighlight={line}
            />
          </p>
        ))}
        {/* 额外的空白内容以确保滚动条出现 */}
        <div style={{ height: '600px' }}></div>
      </div>
    );
  }
}

export default TextDisplayComponent;

// 在React组件的方法中调用
const firstHighlight = document.querySelector('.my-highlight-class');

/**
 * 获取元素相对于文档的绝对偏移量
 * @param {HTMLElement} el - 目标HTML元素
 * @returns {{left: number, top: number}} - 包含left和top偏移量的对象
 */
function getElementOffset(el) {
  if (!el) return { left: 0, top: 0 }; // 处理元素不存在的情况
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

// 假设 offset 是通过 getElementOffset 获取到的目标元素偏移量
window.scrollTo({
  top: offset.top,
  behavior: 'smooth' // 启用平滑滚动效果
});

import React from 'react';
import Highlighter from 'react-highlight-words'; // 假设使用 react-highlight-words

// 辅助函数：获取元素相对于文档的绝对偏移量
function getElementOffset(el) {
  if (!el) return { left: 0, top: 0 };
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

class TextDisplayComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contract: {
        text: [
          "这是第一句话，包含一些特定词汇。",
          "这是第二句话，其中有另一个需要高亮的词。",
          "第三句话，快速的棕色狐狸跳过懒惰的狗。",
          "这里还有一些需要高亮的特定词汇。",
          "最后一句话，用于测试滚动功能。"
        ]
      },
      queryWords: ["特定词汇", "狐狸"] // 示例查询词
    };
  }

  // 组件挂载后执行滚动
  componentDidMount() {
    this.scrollToFirstHighlight();
  }

  // 当 props 或 state 更新时，检查是否需要重新滚动
  componentDidUpdate(prevProps, prevState) {
    // 只有当 queryWords 发生变化时才重新滚动
    if (JSON.stringify(prevState.queryWords) !== JSON.stringify(this.state.queryWords)) {
      this.scrollToFirstHighlight();
    }
  }

  /**
   * 查找第一个高亮元素并滚动到其位置
   */
  scrollToFirstHighlight = () => {
    // 查找第一个具有 'my-highlight-class' 类名的 span 元素
    const firstHighlight = document.querySelector('.my-highlight-class');

    if (firstHighlight) {
      const offset = getElementOffset(firstHighlight);
      window.scrollTo({
        top: offset.top - 80, // 向上偏移80px，留出一些顶部空间
        behavior: 'smooth'   // 平滑滚动
      });
    } else {
      console.log('未找到任何高亮文本。');
    }
  };

  // 示例：动态更改查询词并触发重新滚动
  handleChangeQuery = () => {
    this.setState({
      queryWords: ["棕色", "测试"]
    });
  };

  render() {
    const { contract, queryWords } = this.state;
    return (
      <div style={{ maxHeight: '500px', overflowY: 'auto', border: '1px solid #ccc', padding: '10px' }}>
        <h1>文本内容展示</h1>
        {contract.text.map((line, index) => (
          <p key={index} style={{ marginBottom: '10px', lineHeight: '1.5' }}>
            <Highlighter
              highlightClassName="my-highlight-class"
              highlightStyle={{ backgroundColor: "#ffd500" }}
              searchWords={queryWords}
              autoEscape={true}
              textToHighlight={line}
            />
          </p>
        ))}
        <button onClick={this.handleChangeQuery} style={{ marginTop: '20px', padding: '10px 15px' }}>
          更改查询词并滚动
        </button>
        {/* 额外的空白内容以确保滚动条出现 */}
        <div style={{ height: '600px' }}></div>
      </div>
    );
  }
}

export default TextDisplayComponent;