基本渲染道具转换为试剂

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 需要一个 returns React 元素的函数。

您可以通过

在reagent中做到这一点

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

params 很可能是一个 JS 对象，这意味着您可能需要一些 JS 互操作来将任何道具应用到文本字段。不知道传的是什么params

基本渲染道具转换为试剂

Basic Render Props Translation to Reagent

reactjs

material-ui

clojurescript

reagent