在反应中添加长字符串答案

【问题标题】：Add Long string in react在反应中添加长字符串
【发布时间】：2022-11-02 17:14:48
【问题描述】：

我想以文本形式添加代码，但找不到任何方法来执行此操作。我使用了多行、“``”这个符号、单引号和双引号。我希望每个程序行都在新行中，但它以单行/句子显示。

import React from 'react';
import CodeEditor from './codeEditor';
import multiline from 'multiline';

const str = (`    
// A function to implement bubble sort
void bubbleSort(int arr[], int n)
{
    int i, j;
    for (i = 0; i < n - 1; i++)

        // Last i elements are already
        // in place
        for (j = 0; j < n - i - 1; j++)
            if (arr[j] > arr[j + 1])
                swap(arr[j], arr[j + 1]);
}
`)
export default function BubbleSort() {
  return (
    <CodeEditor Cpp={str} Java={'java'} Python={'python'} Javascript={'js'}/>
  )
}

这是代码编辑器文件

import { Collapse } from 'antd';
import React from 'react';
const { Panel } = Collapse;


const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
    return (
        <Collapse defaultActiveKey={['1']}>
      <Panel header="This is panel header with arrow icon" key="1">
        <p>{Cpp}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="2">
        <p>{Java}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="3">
        <p>{Python}</p>
      </Panel>
      <Panel header="This is panel header with no arrow icon" key="4">
        <p>{Javascript}</p>
      </Panel>
    </Collapse>
    );
}

export default CodeEditor;

【问题讨论】：

标签： javascript node.js reactjs string

【解决方案1】：

除了使用paragraph，可以尝试使用pre 块吗？

<pre> HTML 元素代表预格式化的文本完全按照 HTML 文件中的内容呈现。文本通常是使用非比例或等宽字体呈现。空白此元素内部显示为已写入。

MSDN Article - pre element

const CodeEditor = ({Cpp,Java,Python,Javascript}) => {
  return (
      <Collapse defaultActiveKey={['1']}>
    <Panel header="This is panel header with arrow icon" key="1">
      <pre>{Cpp}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="2">
      <pre>{Java}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="3">
      <pre>{Python}</pre>
    </Panel>
    <Panel header="This is panel header with no arrow icon" key="4">
      <pre>{Javascript}</pre>
    </Panel>
  </Collapse>
  );
}

【讨论】：