基本渲染道具翻译为试剂

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，但无法弄清楚。我正在尝试翻译Mui页面中的示例：

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互操作才能将任何道具应用于文本字段。不知道它会通过哪种params。