基本渲染道具转换为Reagent

Question

所以我试着用试剂渲染MUi自动完成。这是我的尝试

(def options
  (clj->js
     [{:title "title" :year 1990}
      {:title "title2" :year 2990}]))

    (defn autocomplete-text-field []
      [:> TextField
        {:label "Headers"
                 :id "header"
                 :variant "outlined"
                 :fullWidth true }
       ]
   )

(defn add-header-form []
  [:> Card
   {:style #js {:max-width 1000}}
   [:> CardHeader {:title "Add Header"}]
   [:> CardContent
    [:> Grid
     {:container true
      :direction "column"}
     [:> Autocomplete
      {
       :renderInput (r/reactify-component autocomplete-text-field)
       :options options
       :getOptionLabel #(get % :year)}

      ]
     ]
    ]]
  )

我试着直接传递它，意思是:renderInput autocomplete-text-field，但无法理解。我正在尝试翻译梅页面中的示例：

https://material-ui.com/components/autocomplete/

编辑

<Autocomplete
  options={top100Films}
  getOptionLabel={(option: FilmOptionType) => option.title}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField {...params} label="Combo box" variant="outlined" fullWidth />
  )}
/>

那么，我想要做的是，如何为renderInput属性编写相应的试剂代码呢？

提前谢谢。

Answer 1

renderInput需要一个返回React元素的函数。

您可以在reagent中通过

:renderInput (fn [params] (r/as-element [autocomplete-text-field params]))

params很可能是一个JS对象，这意味着您可能需要一些JS互操作来将任何支持应用到textfield。不知道它会通过什么样的params。