React中如何以文本形式展示多行代码？换行问题求助

问题出在HTML的默认渲染行为：你用模板字符串保存的代码里的换行符(\n)，在<p>标签中会被浏览器忽略，所有内容会被合并成单行显示。下面是几种可行的解决办法：

方法一：使用<pre>标签（最简单直接） #

<pre>标签的作用就是保留文本的原始格式，包括换行和缩进，完美适配代码展示。修改你的CodeEditor组件，把<p>换成<pre>即可：

// CodeEditor.jsx 修改后
import { Collapse } from 'antd';
import React from 'react';
const { Panel } = Collapse;

const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
    return (
        <Collapse defaultActiveKey={['1']}>
            <Panel header="C++ 代码" key="1">
                <pre>{Cpp}</pre>
            </Panel>
            <Panel header="Java 代码" key="2">
                <pre>{Java}</pre>
            </Panel>
            <Panel header="Python 代码" key="3">
                <pre>{Python}</pre>
            </Panel>
            <Panel header="Javascript 代码" key="4">
                <pre>{Javascript}</pre>
            </Panel>
        </Collapse>
    );
}

export default CodeEditor;

方法二：将换行符替换为<br />（适合简单场景） #

如果不想用<pre>，可以手动把字符串里的\n替换成HTML的换行标签<br />，但需要用dangerouslySetInnerHTML来渲染：

// CodeEditor.jsx 中修改Cpp的渲染部分
<p dangerouslySetInnerHTML={{ __html: Cpp.replace(/\n/g, '<br />') }} />

⚠️ 注意：这种方式不会保留缩进，代码的空格会被HTML合并，所以只适合不需要保留缩进的简单代码。

方法三：用代码高亮库（专业推荐） #

如果需要代码高亮、更好的格式支持，推荐使用react-syntax-highlighter这类库，既解决换行问题，还能提升代码可读性：

1. 先安装依赖：

npm install react-syntax-highlighter

2. 修改CodeEditor组件：

import { Collapse } from 'antd';
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism';
const { Panel } = Collapse;

const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
    return (
        <Collapse defaultActiveKey={['1']}>
            <Panel header="C++ 代码" key="1">
                <SyntaxHighlighter language="cpp" style={tomorrow}>
                    {Cpp}
                </SyntaxHighlighter>
            </Panel>
            <Panel header="Java 代码" key="2">
                <SyntaxHighlighter language="java" style={tomorrow}>
                    {Java}
                </SyntaxHighlighter>
            </Panel>
            <Panel header="Python 代码" key="3">
                <SyntaxHighlighter language="python" style={tomorrow}>
                    {Python}
                </SyntaxHighlighter>
            </Panel>
            <Panel header="Javascript 代码" key="4">
                <SyntaxHighlighter language="javascript" style={tomorrow}>
                    {Javascript}
                </SyntaxHighlighter>
            </Panel>
        </Collapse>
    );
}

export default CodeEditor;

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