NextUI中dangerouslySetInnerHTML失效，Textarea无法渲染HTML内容

API 探路者

2026-6-24

解决NextUI Textarea无法渲染HTML内容的问题

问题根源

Textarea（包括NextUI封装的版本）本质是为纯文本输入/展示设计的，它不支持渲染HTML内容。你用dangerouslySetInnerHTML完全无效，因为组件内部只会把value的内容当纯文本处理，不会解析HTML。另外你的text1是转义后的字符串（<a>），就算能渲染，也得先转成真实的<a>标签才行。

解决方案

如果要展示带高亮或HTML格式的内容，别用Textarea，换成富文本容器，比如用div配合dangerouslySetInnerHTML，同时模拟Textarea的样式。以下是修改后的代码：

首先安装HTML解码库（处理转义后的字符串）：

npm install he

修改后的组件代码：

import he from 'he';
import { Button } from '@nextui-org/react';

export default function Home() {
  // 转义后的HTML字符串，先解码为真实HTML标签
  const text1 = '&lt;a&gt;foo&lt;/a&gt;';
  const decodedHtml = he.decode(text1);

  return (
    <div className="flex flex-col w-full mb-6 md:mb-0 gap-4">
      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
        {/* 用div模拟只读Textarea的样式，支持HTML渲染 */}
        <div className="resize-y min-h-[200px] p-3 border border-gray-300 rounded-lg bg-gray-50 font-sans text-sm">
          <label className="block mb-1 text-sm font-medium text-gray-700">ID 1</label>
          <div dangerouslySetInnerHTML={{ __html: decodedHtml }} />
        </div>
      </div>
      <div className="flex justify-center gap-6 w-full mt-4">
        <Button color="success" variant="ghost" size="md">Yes</Button>
        <Button color="danger" variant="ghost" size="md">No</Button>
      </div>
    </div>
  );
}

如果你的原始字符串已经是未转义的HTML（比如直接是<a>foo</a>），可以跳过解码步骤，直接把字符串传给dangerouslySetInnerHTML。