优化FormItemsRenderer

components/FormBuilder/FormItemsRenderer.d.ts

@@ -41,6 +41,8 @@ export type FormValues = Record<string, any>;
  * 表单配置项
  */
 export interface FormOption {
+  /** React 需要的 key，如果传递了唯一的 name，则不需要 */
+  key?: string;
   /** 表单项字段名 */
   name?: string | string[];
   /** 表单项标签 */

components/FormBuilder/FormItemsRenderer.js

@@ -133,6 +133,11 @@ const FormItemsRenderer = ({
     return option.rules ? (Array.isArray(option.rules) ? option.rules : [option.rules]) : [];
   };
 
+  // 获取key
+  const getKey = (option) => {
+    return option.key || option.name
+  }
+
   // 渲染表单控件
   const renderFormControl = (option) => {
     const componentProps = getComponentProps(option);
@@ -278,7 +283,7 @@ const FormItemsRenderer = ({
         // 如果是分割线
         if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
           return (
-            <Col key={option.name || index} span={itemSpan} style={style}>
+            <Col key={getKey(option) || index} span={itemSpan} style={style}>
               <Divider orientation="left">{option.label}</Divider>
             </Col>
           );
@@ -291,7 +296,7 @@ const FormItemsRenderer = ({
               ? (renderFormControl(option))
               : (
                   <Form.Item
-                    key={option.name || index}
+                    key={getKey(option) || index}
                     noStyle
                     preserve={false}
                     shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
@@ -307,7 +312,7 @@ const FormItemsRenderer = ({
                         return null;
 
                       return (
-                        <Col key={option.name || index} span={itemSpan} style={style}>
+                        <Col key={getKey(option) || index} span={itemSpan} style={style}>
                           <Form.Item
                             name={option.name}
                             label={renderLabel(option)}
@@ -337,7 +342,7 @@ const FormItemsRenderer = ({
           return null;
 
         return (
-          <Col key={option.name || index} span={itemSpan} style={style}>
+          <Col key={getKey(option) || index} span={itemSpan} style={style}>
             {
               option.customizeRender
                 ? (renderFormControl(option))