如何在re-frame ClojureScript应用中渲染带HTML标签的字符串？

直接渲染HTML字符串时，React会将其作为纯文本处理，而自定义解析返回的DOM对象又不符合React子元素要求，正确做法是使用React的dangerouslySetInnerHTML属性，通过hiccup语法实现：

基础实现 #

定义一个复用组件来处理HTML内容：

(ns your-app.views
  (:require [re-frame.core :as re-frame]))

(defn html-content [html-str]
  [:div {:dangerouslySetInnerHTML {:__html html-str}}])

;; 在视图中使用
(defn article-view []
  (let [article-html @(re-frame/subscribe [:cms/article-html])]
    [:div.article-container
     [html-content article-html]]))

安全注意事项 #

dangerouslySetInnerHTML会直接注入原始HTML，若CMS返回的内容不可信（比如包含恶意脚本），会引发XSS风险。建议先对HTML内容进行净化，使用clj-dompurify库：

1. 添加依赖到project.clj或deps.edn：

;; project.clj示例
[clj-dompurify "0.1.1"]

2. 净化后再渲染：

(ns your-app.views
  (:require [re-frame.core :as re-frame]
            [clj-dompurify.core :as dompurify]))

(defn html-content [html-str]
  [:div {:dangerouslySetInnerHTML {:__html (dompurify/sanitize html-str)}}])

为什么自定义parse-html会报错 #

你之前的自定义函数返回的是HTMLDocument对象，React只能渲染React元素、字符串、数字等合法子元素类型，无法直接渲染DOM对象，所以会抛出"Objects are not valid as a React child"错误。

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