將 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 。