当前位置：首页 > React

react实现行号

2026-01-26 22:31:00React

实现行号的基本方法

在React中实现行号通常涉及渲染一个带有行号的列表或文本编辑器。以下是几种常见场景的解决方案：

纯文本显示行号

对于简单的文本行号显示，可以使用数组的map方法生成带行号的列表：

const TextWithLineNumbers = ({ text }) => {
  const lines = text.split('\n');

  return (
    <div style={{ fontFamily: 'monospace' }}>
      {lines.map((line, index) => (
        <div key={index}>
          <span style={{ color: 'gray', marginRight: '10px' }}>{index + 1}</span>
          {line}
        </div>
      ))}
    </div>
  );
};

代码编辑器行号实现

对于代码编辑器，可以结合textarea或专业编辑器库实现：

const CodeEditor = () => {
  const [code, setCode] = useState('');
  const lines = code.split('\n');

  return (
    <div style={{ display: 'flex' }}>
      <div style={{ 
        paddingRight: '10px',
        textAlign: 'right',
        userSelect: 'none'
      }}>
        {lines.map((_, i) => (
          <div key={i}>{i + 1}</div>
        ))}
      </div>
      <textarea
        value={code}
        onChange={(e) => setCode(e.target.value)}
        style={{ 
          flex: 1,
          fontFamily: 'monospace',
          height: '300px'
        }}
      />
    </div>
  );
};

使用第三方库

专业场景建议使用现成的代码编辑器组件：

react-simple-code-editor：轻量级可定制编辑器
monaco-editor：VS Code同款编辑器
codemirror：功能丰富的代码编辑器

安装示例（以react-simple-code-editor为例）：

npm install react-simple-code-editor prismjs

实现代码：

import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-javascript';

const CodeEditorWithLineNumbers = () => {
  const [code, setCode] = useState('');

  return (
    <Editor
      value={code}
      onValueChange={code => setCode(code)}
      highlight={code => highlight(code, languages.js, 'javascript')}
      padding={10}
      style={{
        fontFamily: '"Fira code", "Fira Mono", monospace',
        fontSize: 12,
      }}
      textareaId="code-editor"
      preClassName="language-js"
    />
  );
};

样式优化技巧

为获得更好的行号显示效果，可考虑以下CSS方案：

.line-numbers {
  counter-reset: line;
}

.line-numbers div::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  padding-right: 1em;
  margin-right: 1em;
  text-align: right;
  color: #999;
  border-right: 1px solid #ddd;
}

动态行号更新

对于需要频繁更新的内容，使用useMemo优化性能：

const DynamicLineNumbers = ({ content }) => {
  const lineCount = useMemo(() => content.split('\n').length, [content]);

  return (
    <div>
      {Array.from({ length: lineCount }).map((_, i) => (
        <div key={i}>{i + 1}</div>
      ))}
    </div>
  );
};

以上方案可根据具体需求选择，从简单文本显示到专业代码编辑器均有覆盖。

react实现行号