NextJS 13：CosmicJS CMS中HTML内容渲染为纯文本问题求助

问题分析 #

你当前直接在React元素中输出HTML字符串，React会自动转义所有HTML字符，导致CosmicJS返回的HTML内容以纯文本形式显示（包含完整的HTML标签）。

解决方案 #

方法1：使用React的dangerouslySetInnerHTML #

这是React官方提供的直接注入HTML内容的方式，修改组件中的内容渲染部分：

async function Post() {
    let post = await getPost();
    return (
        <>
          <div className="mobile:w-full tablet:w-3/5  items-center">
                            <h2 className="text-primary text-center mobile:text-2xl tablet:text-3xl px-14 py-5">
                                {post?.title}
                            </h2>
                            <p 
                                className="text-black px-10 font-light text-justify"
                                dangerouslySetInnerHTML={{ __html: post?.metadata.content || '' }}
                            />
                        </div>
        </>
    );
}

注意：仅当你完全信任HTML内容来源时使用此方法（比如自己管理的CosmicJS内容），避免XSS攻击风险。

方法2：使用第三方HTML解析库（推荐） #

如果希望更安全地处理HTML解析，可以使用react-html-parser库：

1. 安装依赖：

npm install react-html-parser
# 或
yarn add react-html-parser

2. 修改组件代码：

import ReactHtmlParser from 'react-html-parser';

async function Post() {
    let post = await getPost();
    return (
        <>
          <div className="mobile:w-full tablet:w-3/5  items-center">
                            <h2 className="text-primary text-center mobile:text-2xl tablet:text-3xl px-14 py-5">
                                {post?.title}
                            </h2>
                            <p className="text-black px-10 font-light text-justify">
                                {ReactHtmlParser(post?.metadata.content || '')}
                            </p>
                        </div>
        </>
    );
}

这个库会将HTML字符串转换为对应的React元素，同时提供一定的安全处理。

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