fix: 修复 crud column 配置 wrapperComponent 属性导致 dom 结构错误问题 (#6253)

* fix: 修复 crud column 配置 wrapperComponent 属性导致 dom 结构错误问题

* fix: 修复 crud column 配置 wrapperComponent 属性导致 dom 结构错误问题

packages/amis/src/renderers/Card.tsx

@@ -795,6 +795,7 @@ export class CardItemFieldRenderer extends TableCell {
       render,
       style,
       wrapperComponent: Component,
+      contentsOnly,
       labelClassName,
       value,
       data,
@@ -832,9 +833,10 @@ export class CardItemFieldRenderer extends TableCell {
       );
     }
 
-    if (!Component) {
+    if (contentsOnly) {
       return body as JSX.Element;
     }
+    Component = Component || 'div';
 
     return (
       <Component

packages/amis/src/renderers/Copyable.tsx

@@ -64,7 +64,7 @@ export const HocCopyable =
                 {...this.props}
                 className={cx(`Field--copyable`, className)}
               >
-                <Component {...this.props} wrapperComponent={''} noHoc />
+                <Component {...this.props} contentsOnly noHoc />
                 <TooltipWrapper
                   placement="right"
                   tooltip={'点击复制'}

packages/amis/src/renderers/Form/Static.tsx

@@ -56,6 +56,7 @@ export interface StaticProps extends FormControlProps {
   placeholder?: string;
   tpl?: string;
   text?: string;
+  contentsOnly?: boolean;
 }
 
 export default class StaticControl extends React.Component<StaticProps, any> {
@@ -178,6 +179,7 @@ export class StaticFieldRenderer extends TableCell {
       render,
       style,
       wrapperComponent: Component,
+      contentsOnly,
       labelClassName,
       value,
       data,
@@ -210,16 +212,14 @@ export class StaticFieldRenderer extends TableCell {
       style.width = style.width || width;
     }
 
-    if (!Component) {
+    if (contentsOnly) {
       return body as JSX.Element;
     }
 
+    Component = Component || 'div';
+
     return (
-      <Component
-        className={className}
-        tabIndex={tabIndex}
-        onKeyUp={onKeyUp}
-      >
+      <Component className={className} tabIndex={tabIndex} onKeyUp={onKeyUp}>
         {body}
       </Component>
     );

packages/amis/src/renderers/List.tsx

@@ -1421,6 +1421,7 @@ export class ListItemFieldRenderer extends TableCell {
       render,
       style,
       wrapperComponent: Component,
+      contentsOnly,
       labelClassName,
       value,
       data,
@@ -1456,9 +1457,10 @@ export class ListItemFieldRenderer extends TableCell {
       );
     }
 
-    if (!Component) {
+    if (contentsOnly) {
       return body as JSX.Element;
     }
+    Component = Component || 'div';
 
     return (
       <Component

packages/amis/src/renderers/PopOver.tsx

@@ -381,7 +381,7 @@ export const HocPopOver =
           >
             {(popOver as SchemaPopOverObject)?.showIcon !== false ? (
               <>
-                <Component {...this.props} wrapperComponent={''} noHoc />
+                <Component {...this.props} contentsOnly noHoc />
                 <span
                   key="popover-btn"
                   className={cx('Field-popOverBtn')}
@@ -399,7 +399,7 @@ export const HocPopOver =
                   {...triggerProps}
                   ref={config.targetOutter ? undefined : this.targetRef}
                 >
-                  <Component {...this.props} wrapperComponent={''} noHoc />
+                  <Component {...this.props} contentsOnly noHoc />
                 </div>
                 {this.state.isOpened ? this.renderPopOver() : null}
               </>

packages/amis/src/renderers/QuickEdit.tsx

@@ -564,7 +564,7 @@ export const HocQuickEdit =
               }
               onKeyUp={this.handleKeyUp}
             >
-              <Component {...this.props} wrapperComponent={''} noHoc />
+              <Component {...this.props} contentsOnly noHoc />
               <span
                 key="edit-btn"
                 className={cx('Field-quickEditBtn')}

packages/amis/src/renderers/Table/TableCell.tsx

@@ -12,10 +12,11 @@ import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
 
 export interface TableCellProps extends RendererProps {
   wrapperComponent?: React.ReactType;
-  column: object;
+  column: any;
+  contentsOnly?: boolean;
 }
 
-export class TableCell extends React.Component<RendererProps> {
+export class TableCell extends React.Component<TableCellProps> {
   static defaultProps = {
     wrapperComponent: 'td'
   };
@@ -27,7 +28,8 @@ export class TableCell extends React.Component<RendererProps> {
     'body',
     'tpl',
     'rowSpan',
-    'remark'
+    'remark',
+    'contentsOnly'
   ];
 
   readonly propsNeedRemove: string[] = [];
@@ -40,6 +42,7 @@ export class TableCell extends React.Component<RendererProps> {
       render,
       style = {},
       wrapperComponent: Component,
+      contentsOnly,
       column,
       value,
       data,
@@ -146,12 +149,14 @@ export class TableCell extends React.Component<RendererProps> {
       style.background = color;
     }
 
-    if (!Component) {
+    if (contentsOnly) {
       return body as JSX.Element;
     }
 
     if (isHead) {
       Component = 'th';
+    } else {
+      Component = Component || 'td';
     }
 
     return (