Clojurescript / Reagent / Chart.js - 试剂生命周期 - chart.update()

时间:2017-11-10 20:46:45

标签: chart.js clojurescript reagent chartjs-2.6.0

我们正在使用带有clojurescript和Reagent的chart.js。现在我知道Chart.js有一个chart.update()方法来用新数据更新图表。所以问题是,我如何设置我的组件,使其呈现图表:试剂渲染但可能得到:component-will-update来调用chart.update()方法?

基本上,有没有办法在图表中获取一个句柄:trial-render function in:component-will-update function?

1 个答案:

答案 0 :(得分:1)

在这种情况下,您通常采用的模式是将有状态/可变对象包装在React组件中,并使用React的生命周期方法。

/** * Integrate data mongo + mvc */ @RunWith(SpringRunner.class) @SpringBootTest @AutoConfigureMockMvc public class BookCustomRepositoryIntegrationTest { @Autowired BookRepository repository; @Autowired MockMvc mockMvc; @Test @WithMockUser public void reproduceBug() throws Exception { repository.findAll(); //Runs allright mockMvc.perform(get("/books") .contentType(APPLICATION_JSON_UTF8)) .andExpect(status().isOk()); repository.findAll(); //Throws exception: java.lang.IllegalArgumentException: Authentication object cannot be null } } 的{​​{3}}中对该方法进行了详细说明,但这是我倾向于使用D3的方法:

re-frame

保持外部/内部组合非常重要,因为否则React不会正确填充其道具。

要注意的另一件事是(defn graph-render [graph-attrs graph-data] ;; return hiccup for the graph here (let [width (:width graph-attrs) height (:height graph-attrs)] [:svg {:width width :height height} [:g.graph]])) (defn graph-component [graph-attrs graph-data] (r/create-class {:display-name "graph" :reagent-render graph-render :component-did-update (fn [this] (let [[_ graph-attrs graph-data] (r/argv this)] (update! graph-attrs graph-data))) :component-did-mount (fn [this] (let [[_ graph-attrs graph-data] (r/argv this)] (init! graph-attrs graph-data)))})) (defn container [] [:div {:id "graph-container"} [graph-component @graph-attrs-ratom @graph-data-ratom]]) 向量的返回,如您所见,向量包含在第一项之后的道具。我在上面的Wiki页面中看到过reagent/argv,但我自己从未尝试过。