React类组件中滚动到长文本内的指定高亮文本

实现方案 #

方法一：通过React Refs标记目标元素 #

这种方式更贴合React数据流，避免直接操作DOM的潜在问题：

class TextViewer extends React.Component {
  constructor(props) {
    super(props);
    this.firstHighlightedRef = React.createRef();
    this.state = {
      lines: [], // 存储文本文件的每行内容
      queryWords: '' // 高亮关键词，多词用逗号分隔
    };
  }

  componentDidMount() {
    // 示例：加载文本文件内容到state
    this.loadTextFromFile();
  }

  componentDidUpdate(prevProps, prevState) {
    // 当关键词变化或文本行加载完成时，触发滚动
    if ((prevState.queryWords !== this.state.queryWords || prevState.lines.length !== this.state.lines.length) && this.firstHighlightedRef.current) {
      this.scrollToTarget();
    }
  }

  scrollToTarget() {
    this.firstHighlightedRef.current.scrollIntoView({
      behavior: 'smooth', // 可选：开启平滑滚动
      block: 'start' // 滚动到元素顶部位置
    });
  }

  loadTextFromFile() {
    // 替换为你的文本加载逻辑，比如fetch请求
    fetch('/your-text-file.txt')
      .then(res => res.text())
      .then(text => {
        this.setState({ lines: text.split('\n') });
      });
  }

  render() {
    const { lines, queryWords } = this.state;
    let isFirstMatch = true;
    const searchWords = queryWords.split(',').map(word => word.trim());

    return (
      <div className="text-wrapper">
        {lines.map((line, idx) => {
          const hasMatch = searchWords.some(word => line.includes(word));
          // 仅给第一个匹配行绑定ref
          const lineRef = hasMatch && isFirstMatch ? this.firstHighlightedRef : null;
          if (hasMatch && isFirstMatch) isFirstMatch = false;

          return (
            <p key={idx} ref={lineRef}>
              <Highlighter
                searchWords={searchWords}
                autoEscape={true}
                textToHighlight={line}
              />
            </p>
          );
        })}
      </div>
    );
  }
}

方法二：直接查询DOM元素（无需Ref） #

如果不想用Ref，可以利用Highlighter默认生成的highlight类名定位元素：

componentDidUpdate(prevProps, prevState) {
  if (prevState.queryWords !== this.state.queryWords) {
    // 找到第一个包含高亮文本的p元素
    const firstHighlightedLine = document.querySelector('.highlight')?.closest('p');
    if (firstHighlightedLine) {
      firstHighlightedLine.scrollIntoView({ behavior: 'smooth' });
    }
  }
}

备注：若需兼容不支持closest的旧浏览器，可通过循环遍历父元素的方式替代。

关键注意点 #

1. 生命周期选择：
   • 若文本和关键词在组件挂载时就已就绪，直接在componentDidMount中调用滚动方法。
   • 若文本是异步加载或关键词后续动态变化，必须在componentDidUpdate中判断状态变化后执行滚动，避免无效调用。
2. 原jQuery方案失效原因：
   • jQuery的:contains区分大小写，多关键词场景下匹配逻辑不准确。
   • Highlighter会将匹配文本拆分为<span>包裹，直接用:contains可能匹配到未高亮文本，或无法定位到正确的父级<p>元素。

内容的提问来源于stack exchange，提问作者LessTRess