是否可以用 格式良好

Question

当我用react写网页时，我有这样一个字符串：

"\n\nAs an AI language model, I can write the code for the bubble sort algorithm in Python:\n\n```\ndef bubble_sort(arr):\n n = len(arr)\n for i in range(n):\n for j in range(0, n-i-1):\n if arr[j] > arr[j+1] :\n arr[j], arr[j+1] = arr[j+1], arr[j]\n\n```\n\nTo use the above function for sorting, pass an unsorted list, as an argument:\n\n```\nmy_list = [5, 2, 9, 1, 5, 6, 3]\nbubble_sort(my_list)\nprint(my_list) # Output will be: [1, 2, 3, 5, 5, 6, 9]\n```\n\nThis is how the bubble sort works:\n\n- It compares the adjacent elements in an array and swaps them if the first element is greater than the second element.\n- The entire array is traversed one pass at a time.\n- After each pass, the largest element gets sorted to the end of the array, and the next pass ignores the last element since it is already sorted.\n- This process continues until the entire array is sorted."

是否可以使用格式良好的 UI 页面呈现它？我已经尝试过 dangous html 来呈现，似乎只适用于 html，而不适用于我的格式。我试过这样：

const renderChat = () => {
        const tagList: JSX.Element[] = [];
        myMap.forEach((value, key) => {
            tagList.push(
                <div key={uuid()} className="chat-message">
                    <div key={uuid()} className="message-time">{key}</div>
                    <div key={uuid()} className="message-text">
                        <pre>{value}</pre>
                    </div>
                </div>);
        });
        return tagList;
    };

Answer 1

为了格式化文本，只需将您拥有的文本包裹在

<pre>

元素中并添加大括号。大括号允许您将文本视为 JavaScript 字符串，因此我们可以使用转义序列 (' ', ' '、' ' 等）定义。

<pre style={{ "text-align": "left" }}>
  {"your text\n another line"}
</pre>

React 将转义 JSX 中的任何值，因此即使字符串中包含危险的 html，它也只会显示为文本。例如，

<img src=xss onerror=\"alert('you have been hacked')

只会显示为文本。

renderChat

函数组件的首字母必须大写。大写类型表示 JSX 标签指的是 React 组件（docs）。而不是返回一个

JSX.Element[] = [];

这不是一个有效的 JSX 元素，你可以只映射

myMap

并返回它。

const RenderChat = () => {
  return (
    <>
      {myMap.map((value, key) => (
        <div key={uuid()} className="chat-message">
          <div key={uuid()} className="message-time">
            {key}
          </div>
          <div key={uuid()} className="message-text">
            <pre>{value}</pre>
          </div>
        </div>
      ))}
    </>
  );
};

Answer 2

在这种情况下，您可以在文本渲染组件上使用

white-space: pre-wrap

CSS 属性将

\n

渲染为新行。

let lineBreakString = "\n\nAs an AI language model, I can write the code for the bubble sort algorithm in Python:\n\n```\ndef bubble_sort(arr):\n n = len(arr)\n for i in range(n):\n for j in range(0, n-i-1):\n if arr[j] > arr[j+1] :\n arr[j], arr[j+1] = arr[j+1], arr[j]\n\n```\n\nTo use the above function for sorting, pass an unsorted list, as an argument:\n\n```\nmy_list = [5, 2, 9, 1, 5, 6, 3]\nbubble_sort(my_list)\nprint(my_list) # Output will be: [1, 2, 3, 5, 5, 6, 9]\n```\n\nThis is how the bubble sort works:\n\n- It compares the adjacent elements in an array and swaps them if the first element is greater than the second element.\n- The entire array is traversed one pass at a time.\n- After each pass, the largest element gets sorted to the end of the array, and the next pass ignores the last element since it is already sorted.\n- This process continues until the entire array is sorted.";

let textDiv = document.querySelector('#text-div');
textDiv.innerHTML = lineBreakString;

#text-div {
  white-space: pre-wrap;
}

<div id="text-div"></div>