将Antd Form.Item转换为试剂hiccup

Question

我正试着把antd反应从一项转化为试剂--打嗝。

最初的反应成分是这样的，

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

当我尝试把它转换成试剂hiccup表示时，我尝试了下面的变化。

变异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向量，以便反应组件来理解它们。<Icon .../>创建了一个React元素，因此看起来prefix=...需要一个元素。您所要做的就是将第三个变体中的r/as-component替换为r/as-element。