试剂在安装前获取元素内容

Question

我正在向应用程序添加一些试剂，其中一些打嗝渲染已经在服务器上从数据库完成。显然，react 然后挂钩到它看到并挂载的 html。

我想做一些渐进式的增强，即应该挂载一个反应/试剂组件，但我还需要它要挂载的 div 的原始文本，这是由数据库放在那里的。因此，要在静态 html 中做出反应，它将在挂载时被覆​​盖。我想在“删除”之前保存该元素的内容。

这是不工作的地方

(defn by-id [id] (js/document.getElementById id))

(when-let [el (by-id "lesson-app")]        ; only mount when this el is present
  (let [lesson-text (by-id "lesson-app")]  ; try to get el contents before mount
    (console.log lesson-text)              ; <- this logs contents *after* mount!!
    (rdom/render [lesson-app] el)))        ; mount the component

这里记录到控制台的是 dom 元素 after mount。这是为什么呢？

想知道是否可以使用 form-2 组件并获取 let 中的内容。不过这对我不起作用，如果有人能解释一下，我很想知道为什么。

更新

如here 所述，我已成功将文本作为html 属性传递。但这意味着对于渐进增强，我需要将文本渲染两次，一次作为属性，一次作为普通文本内容。

更新 2

我感觉这可能是出于惯例或鼓励的成语和/或也许反应的 speed 不允许您传递 html 元素内容（这样做显然不违反物理定律）。如果这是正确的，那么轻微的成本是对于渐进式应用程序，我们必须将文本复制为 html 元素内容和 data- 属性，但至少对于我目前的情况来说这并不可怕。

Answer 1

这个功能 isn't supported 由 react.

我们使用 html data- 属性来代替。

例如：

(defn ^:export run []
  (when-let [el (by-id "lesson-app")]
    (let [data-text (.getAttribute el "data-text")]
      (rdom/render [lesson-app data-text] el))))