将 Antd Form.Item 转换为试剂打嗝

Question

我正在尝试将antd react 表单项翻译为试剂打嗝。

原始的反应组件是这样的，

        <Form.Item>
          {
            <Input
              prefix={<Icon type="user"/>}
              placeholder="Username"
            />
          }
        </Form.Item>

当我尝试将其转换为试剂打嗝表示时，我尝试了以下变体。

变体1：

[:> Form.Item
   [:> Input
    {:prefix [:> Icon {:type "user"}] :placeholder "Username"}]]

变体2：

[:> Form.Item
   [:> Input
    {:prefix [:> js/antd.Icon {:type "user"}] :placeholder "Username"}]]

变体3：

(defn antd-username []
  [:> Form.Item
   [:> Input
    {:prefix (r/as-component [:span [:> Icon {:type "user"}]]) :placeholder "Username"}]])

他们都没有工作，我收到以下错误，

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
.
.
.
.

而如果我删除前缀部分它会起作用。 所以我没有其他问题。

将上述组件转换为试剂打嗝的正确方法是什么？

Answer 1

有 React 组件、实例和元素。 你几乎在你的第三个变体中得到了它——你确实需要用一些东西来包装 Hiccup 向量，以便 React 组件理解它们。 <Icon .../>创建了一个 React 元素，所以看起来prefix=...需要一个元素。 您所要做的就是将第三个变体中的r/as-component替换为r/as-element 。