Перевод базового рендеринга реквизита в реагент - PullRequest
Новая
       17

Перевод базового рендеринга реквизита в реагент

0 голосов
/ 05 ноября 2019

Итак, я пытаюсь визуализировать автозаполнение 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?

Заранее спасибо.

1 Ответ

2 голосов
/ 05 ноября 2019

renderInput ожидает функцию, которая возвращает элемент React.

Вы можете сделать это в reagent через 

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

params, скорее всего, будет объект JS,Это означает, что вам, скорее всего, понадобится JS-взаимодействие, чтобы применить любой реквизит к текстовому полю. Не знаю, что за params проходит.

...