React+Tailwind组件中如何用JS使字符串在div内按指定格式显示

方案1：用CSS直接渲染换行（最简单） #

直接给包裹的div加上Tailwind的whitespace-pre-line类，让字符串里的\n换行符被浏览器识别并渲染成实际换行，完美还原你想要的格式。

代码示例：

import React from 'react';

const ItemList = () => {
  const items = "These are the items:\n1. apple\n2. mango";
  
  return (
    <div className="whitespace-pre-line">
      {items}
    </div>
  );
};

export default ItemList;

方案2：生成语义化的HTML有序列表 #

如果想要更符合HTML语义的有序列表（而非纯文本格式），可以拆分字符串生成<ol>和<li>标签，配合Tailwind样式美化：

代码示例：

import React from 'react';

const ItemList = () => {
  const itemsStr = "These are the items:\n1. apple\n2. mango";
  // 拆分标题和列表项
  const [title, ...rawItems] = itemsStr.split('\n');
  // 去掉每个列表项的序号前缀
  const listItems = rawItems.map(item => item.replace(/^\d+\.\s/, ''));
  
  return (
    <div className="space-y-2">
      <p>{title}</p>
      <ol className="list-decimal pl-6">
        {listItems.map((item, idx) => (
          <li key={idx}>{item}</li>
        ))}
      </ol>
    </div>
  );
};

export default ItemList;

这里用list-decimal让<ol>显示数字序号，pl-6设置缩进，space-y-2给元素之间添加间距。

方案3：使用dangerouslySetInnerHTML（不推荐） #

如果必须用HTML标签处理格式，可以把换行符替换成<br>，但这种方法有XSS风险，仅当字符串完全可控时使用：

代码示例：

import React from 'react';

const ItemList = () => {
  const items = "These are the items:\n1. apple\n2. mango";
  const formattedContent = items.replace(/\n/g, '<br>');
  
  return (
    <div dangerouslySetInnerHTML={{ __html: formattedContent }} />
  );
};

export default ItemList;

⚠️ 注意：若字符串来自用户输入，绝对不要用这个方法，避免注入恶意代码。

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