Estoy tratando de traducir un elemento de formulario de reacción antd a reactivo-hipo.
El componente de reacción original es algo como esto,
<Form.Item> { <Input prefix={<Icon type="user"/>} placeholder="Username" /> } </Form.Item>Y probé las siguientes variaciones cuando traté de convertirlo en una representación de hipo reactivo.
Variación 1:
[:> Form.Item [:> Input {:prefix [:> Icon {:type "user"}] :placeholder "Username"}]]Variación 2:
[:> Form.Item [:> Input {:prefix [:> js/antd.Icon {:type "user"}] :placeholder "Username"}]]Variación 3:
(defn antd-username [] [:> Form.Item [:> Input {:prefix (r/as-component [:span [:> Icon {:type "user"}]]) :placeholder "Username"}]])Ninguno de ellos funcionó y recibo el siguiente error,
Uncaught Error: Objects are not valid as a React child (found: object with keys {type}). If you meant to render a collection of children, use an array instead. in span in span in Unknown (created by ForwardRef) in ForwardRef (created by ForwardRef) in ForwardRef (created by app.auth.views.login.antd_username) in div in div in div (created by Col) in Col in Unknown in div (created by Row) in Row . . . .Mientras que si elimino la parte del prefijo, funciona. Así que no tengo ningún otro problema.
¿Cuál es la forma correcta de convertir el componente antes mencionado en reactivo-hipo?
Hay componentes, instancias y elementos de React. Casi lo obtienes en tu tercera variación: necesitas envolver los vectores de Hiccup con algo para que los componentes de React los entiendan. <Icon .../> crea un elemento React, por lo que parece que prefix=... espera un elemento. Todo lo que tienes que hacer es reemplazar r/as-component en tu tercera variación con r/as-element .