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

Question

我可以使用 Javascript 版本的 React

  this.props

但我可以用什么来提供道具

  :reagent-render

打回来？

我正在尝试按照 Chart.js 第 14 行中的操作进行操作。

Answer 1

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

然而，这是反模式，并且非常难以管理，因为您正在尝试使用 内部更新 data prop component-did-mount，完成后，需要手动向 发出信号React component以更新自身。

Reagent 的功能之一是提供检测更改和更新组件的功能，通常使用atom. 有关详细信息，请参阅管理试剂中的状态。

您想要做的正是重构框架正在帮助管理的事情。您设置一个数据存储，当存储发生更改时，它会向订阅者（React 元素）发出信号以进行相应更新，并且您不必自己处理信号更改。

atoms在某些边缘情况下，有必要利用生命周期事件，尤其是图表和其他绘图库，但如果您发现试剂和/或re-frame library不足以满足您的需求，我可能建议您重新访问。希望这可以帮助。