如何在Helix（ClojureScript）中使用react-markdown库？

错误原因 #

控制台报错module$node_modules$react_markdown$index is not a function，本质是两个问题：

1. 导入方式错误：react-markdown以ES模块发布，默认导出是组件本身，但当前导入未获取默认导出，拿到的是整个模块对象而非组件函数。
2. 组件渲染方式错误：Helix中渲染第三方React组件必须使用$宏，直接调用组件函数不符合Helix的渲染逻辑。

修正方案 #

1. 正确导入react-markdown #

修改blog.cljs中的导入语句，添加:default关键字获取默认导出：

(ns mypage.blog
  (:require [helix.core :refer [defnc $]]
            [helix.dom :as d]
            ["react-markdown" :default ReactMarkdown]))

2. 使用Helix的$宏渲染组件 #

用$宏包裹ReactMarkdown组件，直接传入Markdown内容作为子元素（react-markdown v7+推荐这种写法，替代旧版的source属性）：

(defnc blog []
  (d/div {:class "blog-section"}
    ($ ReactMarkdown "# Header\nSome text...")))

如果需要传递额外props（比如自定义类名、插件等），可以这样写：

($ ReactMarkdown {:className "blog-markdown"}
  "# Header\nSome text...")

完整修正后的blog.cljs #

(ns mypage.blog
  (:require [helix.core :refer [defnc $]]
            [helix.dom :as d]
            ["react-markdown" :default ReactMarkdown]))

(defnc blog []
  (d/div {:class "blog-section"}
    ($ ReactMarkdown "# Header\nSome text...")))

为什么之前的写法无效？ #

• 未加:default的导入会获取整个模块对象，而非组件函数，因此调用时会触发"不是函数"的错误。
• Helix的$宏负责处理React组件的props转换、渲染上下文等逻辑，直接调用组件函数无法触发这些处理，导致渲染失败。

内容的提问来源于stack exchange，提问作者Elías