Question

我可以使用Javascript的反应版本

  this.props

但是我可以用什么来提供

中的道具

  :reagent-render

回调？

Chart.js第14行中的

I am trying to do as done here。

Answer 1

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

(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]

但是，这是反模式并且很难管理，因为您尝试使用component-did-mount在内部更新数据支持，完成后，需要手动发信号通知React component更新自己。

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

您要做的就是Re-frame Framework正在帮助管理的内容。您设置了一个数据存储，当存储发生变化时，它会向订阅者（React元素）发出相应的更新信号，而您不必自己处理信号更改。

有一些边缘情况需要使用生命周期事件，尤其是图表和其他绘图库，但如果您找到试剂atoms和/或re-frame library，我建议您重新访问不足以满足您的需求。希望这会有所帮助。

Answer 2

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

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

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

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

在试剂中获取道具：试剂渲染功能

2 个答案: