Antd Form.Item转reagent-hiccup报错，求正确转换方法

原React代码 #

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

错误原因 #

报错核心是：Reagent中，传递给组件props的React元素必须以Hiccup向量形式定义，而非纯props对象。如果直接给prefix传{:type "user"}，React会把它当成普通JS对象，无法作为子元素渲染，从而抛出"Objects are not valid as a React child"错误。

正确的Reagent Hiccup写法 #

假设你已正确导入Antd的Form.Item、Input和Icon组件，正确转换代码如下：

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

关键注意点 #

• Antd组件导入：确保已将需要的组件正确导入到ClojureScript代码中，例如：

  (:require
    ["antd/es/form" :refer [Form]]
    ["antd/es/input" :default Input]
    ["antd/es/icon" :default Icon])
  

  此时Form.Item可通过(.-Item Form)获取，也可以直接导入["antd/es/form/Item" :default FormItem]简化使用。
• 嵌套组件传递：当组件props需要接收另一个React元素时（比如这里的prefix），必须用[组件名 props-map]的Hiccup格式，不能只传单独的props对象。

内容的提问来源于stack exchange，提问作者Kannan Ramamoorthy