在试剂的 :reagent-render 函数中获取道具

Question

我可以使用 Javascript 的 React 版本

  this.props

但是在

中我可以用什么来赠送道具

  :reagent-render

回调？

I am trying to do as done here 在 Chart.js 第 14 行。

Answer 1

据我所知，您接受来自用户的一些 Hiccup 数据作为字符串，对吗？然后尝试将其评估为 user 命名空间，其中仅加载 reagent 库？

首先，您构建更多代码来评估的次数越多，它就越难理解。你可以使用这样的东西：

(binding [*ns* user-ns] (eval (read-string user-data)))

此外，为了防止错误输入，最好使用 Schema 或 clojure.spac 库来验证用户的输入。由于 read-string returns 是一种数据结构，因此也可以用这两个来检查它。所以你会在开始评估之前看到一个错误。

Answer 2

要回答您的问题，您可以通过执行以下操作访问 reagent-render 中的 component 和 props

(ns chartly.core
  (:require
    [reagent.ratom :as ra]
    [reagent.core :as r]))

(defn data-fn [implicit-this]
  ;; use implicit-this as needed, which is equivalent to "this"
  ;; From create-class docs -
  ;;    :component-did-mount (fn [this])
 )

(defn chart-render []
  (let [comp     (r/current-component)     ;; Reagent method
        r-props  (r/props comp)            ;; Reagent method
        js-props (.-props (clj->js comp))]
      (js/console.log "PROPS" r-props)     ;;--  etc...
    [:div {:style {:width 100}}]))

(def data (ra/atom {})) ;;--> see more info on reagent-atom

(defn chart-component []
  (r/create-class
   {:component-did-mount data-fn
    :display-name "chart-component"
    :reagent-render chart-render}))

    To use - 
    [chart-component]

但是，这是 anti-pattern 并且很难管理，因为您正在尝试使用 component-did-mount 在内部更新数据属性，完成后需要手动向 React component 更新自身。

Reagent 的一个特点是提供检测变化和更新组件的功能，通常使用 atom。有关详细信息，请参阅 Managing State in Reagent。

您想要做的正是 Re-frame Framework 正在帮助管理的事情。你 set-up 一个 data-store，当 store 发生变化时，它会向订阅者（React 元素）发出相应更新的信号，你不必自己处理信号变化。

有一些极端情况需要利用生命周期事件，尤其是图表和其他绘图库，但如果您找到试剂，我可能会推荐 re-visiting atoms and/or re-frame library 不足以满足您的需求。希望这有帮助。

在试剂的 :reagent-render 函数中获取道具

Getting props in reagent's :reagent-render function

clojurescript

reagent