你可以将它作为innerText传递：

const items = "These are the items:\n1. apple\n2. mango";
document.getElementById("thediv").innerText=items;

<div id="thediv"></div>

您可以迭代map方法，只要遇到任何'/n'就拆分它。此外，您也可以为此目的创建一个有序列表。例如，找到下面的代码。import React from 'react';

const items = "These are the items:\n1. apple\n2. mango";

const ListComponent = () => {
  const itemList = items.split('\n').map((item, index) => {
    if (item.trim()) {
      return <p key={index}>{item}</p>;
    }
    return null;
  });

  return (
    <div>
      <p>Here is the list:</p>
      <div>{itemList}</div>
    </div>
  );
};

export default ListComponent;

下面是运行running the above code时上述代码的屏幕截图

您应该用换行符分割字符串，然后将其Map到多个段落标记中

const items = "These are the items:\n1. apple\n2. mango";

// or if you want it t be reactive:
const [items, setItems] = useState("These are the items:\n1. apple\n2. mango");

然后在html中：

<div className="list">
      {items.split('\n').map((el) => (
         <p>{el}</p>
       ))}
    </div>

现在列表显示正确，如果项目居中，你想让它们左对齐，只需输入text-align：left;在列表css类中

你应该解析你的字符串以得到一个列表。一个非常简单的解析是：items.split('/n')
你会收到
["These are the items:", "1. apple", "2. mango"]现在很容易显示

const string = "These are the items:\n1. apple\n2. mango";
console.log(string.split("\n"));