Next.js 13服务端如何清理HTML？已尝试方案仍显示标签

问题核心在于React的默认转义行为：React会把字符串中的HTML标签当作普通文本处理，直接渲染sanitizeHtml返回的字符串时，标签不会被解析成对应的HTML元素，只会原样显示。

解决方式是使用React的dangerouslySetInnerHTML属性，它允许将处理后的HTML内容直接插入DOM中。修改代码如下：

替换原代码中的：

{sanitizeHtml(item.tekst)}

为：

<div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.tekst) }} />

完整修改后的代码：

import getData from '../../../firebase/firestore/getData';
import sanitizeHtml from 'sanitize-html';

export default async function Jbpregled() {
const data = await getData();

return (
    <div className="mt-4">
        <div className="px-4 sm:px-8 max-w-5xl m-auto">
            <h1 className="text-center font-semibold text-sm">Javne nabavke:</h1>
            <ul className="border border-gray-200 rounded overflow-hidden shadow-md">

                {data.map(item => <li key={item.id} className="px-4 py-2 bg-white hover:bg-sky-100 hover:text-sky-900 border-b last:border-none border-gray-200 transition-all duration-300 ease-in-out">
                    <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.tekst) }} />
                </li>)}
            </ul>

        </div>
    </div>

)
}

注意：dangerouslySetInnerHTML的命名是为了提醒开发者注意XSS风险，但你已经通过sanitizeHtml完成了HTML清理，只要数据源可信，就能有效规避风险。

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