如何点击按钮滚动到uiw-react-codemirror指定类名的行？

步骤1：获取CodeMirror实例 #

首先通过useRef获取CodeMirror组件的实例，才能调用底层滚动API：

import { useRef } from 'react';
import CodeMirror from '@uiw/react-codemirror';

// 组件内部创建ref
const cmRef = useRef(null);

// 给CodeMirror组件添加ref属性
<CodeMirror
  ref={cmRef}
  id="codemirrorId"
  value={value}
  height={height}
  theme={darkMode ? aura : xcodeLight}
  extensions={extensions}
  onChange={onChange}
  readOnly={readOnly}
  color="text.primary"
/>

步骤2：确认目标行信息 #

确保你已经通过classnameExt给目标行添加了自定义类名（比如target-line），并且记录了目标行的行号（比如存在targetLineNum变量中）。

步骤3：实现滚动函数 #

两种实现方式任选其一：

方式一：通过行号精准滚动（推荐）

利用CodeMirror底层scrollIntoView方法定位：

const scrollToTargetLine = () => {
  if (!cmRef.current || !targetLineNum) return;
  
  const view = cmRef.current.view;
  const line = view.state.doc.line(targetLineNum);
  // align可选值：'center'（居中）、'start'（顶部）、'end'（底部）
  view.scrollIntoView({ from: line.from, to: line.to }, { align: 'center' });
};

方式二：通过类名查找DOM滚动

依赖自定义类名定位行元素：

const scrollToTargetLine = () => {
  const targetLineEl = document.querySelector('.target-line');
  if (targetLineEl) {
    // behavior: 'smooth'开启平滑滚动，可选
    targetLineEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
};

步骤4：绑定按钮点击事件 #

给按钮添加点击事件触发滚动：

<button onClick={scrollToTargetLine}>滚动到目标行</button>

补充：classnameExt示例 #

如果还没配置行类名，参考以下写法：

import { classnameExt } from '@uiw/react-codemirror';

const extensions = [
  classnameExt((state, line) => {
    // 给第5行添加自定义类名
    return line.number === 5 ? 'target-line' : '';
  })
];

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