clojurescript - 在试剂的 :reagent-render function 中获取 Prop

Question

我可以使用 Javascript 版本的 React

  this.props

但是我可以用什么来给 Prop

  :reagent-render

回调？

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

Answer 1

要回答您的问题，您可以通过执行以下操作访问 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]

但是，这是反模式并且很难管理，因为您正尝试使用 component-did-mount 在内部更新数据属性，完成后需要手动更新向 React 组件 发出更新自身的信号。

Reagent 的一个特性是提供检测变化和更新组件的功能，通常使用 atom。参见 Managing State in Reagent了解更多信息。

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

有一些极端情况需要利用生命周期事件，尤其是图表和其他绘图库，但如果您发现试剂 atom 和/或 re-frame library 不足以满足您的需求。希望这会有所帮助。