@gmfe/table-x 2.14.30-beta.2 → 2.14.30-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gmfe/table-x",
-  "version": "2.14.30-beta.2",
+  "version": "2.14.30-beta.3",
   "description": "",
   "author": "liyatang <liyatang@qq.com>",
   "homepage": "https://github.com/gmfe/gmfe#readme",

package/src/hoc/two_level_header_table_x/td.js

@@ -6,12 +6,64 @@ import React from 'react'
 // cell.render('Cell') 是一个react组件,如果这个组件return undefined,那就就会报错
 // 这里是为了兼容 cell.render('Cell') 返回undefined的情况
 class TdCatchErr extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  static getDerivedStateFromError(error) {
+    // 捕获子组件树中的错误，返回新的 state
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // 静默处理错误，不打印日志
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null
+    }
+    const children = this.props.children
+    // 如果 children 是 undefined 或 null，返回 null（React 允许返回 null）
+    if (children === undefined || children === null) {
+      return null
+    }
+    return children
+  }
+}
+
+// 创建一个包装组件，用于包装 Cell 组件的 type，确保它总是返回有效值
+// 这个组件会包装原始的 Cell 组件，如果原始组件返回 undefined，就返回 null
+const SafeCellWrapper = OriginalComponent => {
+  return function WrappedCell(props) {
+    try {
+      const result = OriginalComponent(props)
+      // 如果原始组件返回 undefined，返回 null
+      return result === undefined ? null : result
+    } catch (error) {
+      return null
+    }
+  }
+}
+
+// 错误边界组件，专门用于捕获 Cell 组件返回 undefined 的错误
+class SafeCellErrorBoundary extends React.Component {
+  state = {
+    hasError: false
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true }
+  }
+
   componentDidCatch(error, errorInfo) {
-    console.warn(error)
-    console.warn(errorInfo.componentStack)
+    // 静默处理错误
   }
 
   render() {
+    if (this.state.hasError) {
+      return null
+    }
     return this.props.children
   }
 }
@@ -40,12 +92,26 @@ const Td = ({ cell, totalWidth }) => {
   }
 
   // 如果 Cell 返回 undefined，转换为 null（null 不会报错，undefined 会）
-  const cellContent = cell.render('Cell')
-  const safeCellContent = cellContent === undefined ? null : cellContent
+  let cellContent = cell.render('Cell')
+
+  // cellContent 是一个 React 元素，但它的 type（组件）在渲染时可能返回 undefined
+  // 我们需要用一个包装组件来替换原始的 type，确保总是返回有效值
+  if (cellContent && React.isValidElement(cellContent)) {
+    // 创建一个新的 React 元素，用包装组件替换原始的 type
+    const OriginalComponent = cellContent.type
+    const WrappedComponent = SafeCellWrapper(OriginalComponent)
+    cellContent = React.createElement(
+      SafeCellErrorBoundary,
+      null,
+      React.createElement(WrappedComponent, cellContent.props)
+    )
+  } else if (cellContent === undefined || cellContent === null) {
+    cellContent = null
+  }
 
   return (
     <td {...tdProps}>
-      <TdCatchErr>{safeCellContent}</TdCatchErr>
+      <TdCatchErr>{cellContent}</TdCatchErr>
     </td>
   )
 }

package/src/hoc/two_level_header_table_x/thead.js

@@ -174,7 +174,12 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
               }
             }
           }
-          const { colSpan: hpColSpan, rowSpan: hpRowSpan, ...restHp } = hp || {}
+          const {
+            colSpan: hpColSpan,
+            rowSpan: hpRowSpan,
+            key: hpKey,
+            ...restHp
+          } = hp || {}
           const finalRowSpan =
             rowSpan !== undefined ? Number(rowSpan) : undefined
           const finalColSpan =
@@ -201,8 +206,12 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
             style: cellStyle
           }
 
+          // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
+          // 如果有 hpKey，也加上索引以确保唯一性（因为 hpKey 可能也会重复）
+          const baseKey = hpKey || header.id || header.accessor
+          const headerKey = baseKey ? `${baseKey}-${idx}` : `header-${idx}`
           return (
-            <th key={idx} {...thProps}>
+            <th key={headerKey} {...thProps}>
               {typeof header.Header === 'function' ? (
                 <header.Header />
               ) : (
@@ -248,9 +257,15 @@ const TwoLevelTHead = ({ headerGroups, firstLevelHeaders, totalWidth }) => {
             ) {
               return null
             }
+            // 生成唯一的 key：结合 id/accessor 和索引，确保即使 id/accessor 相同，key 也是唯一的
+            const columnKey = column.id
+              ? `${column.id}-${idx}`
+              : column.accessor
+              ? `${column.accessor}-${idx}`
+              : `col-${idx}`
             return (
               <Th
-                key={idx}
+                key={columnKey}
                 column={{
                   ...column,
                   // column.fixed 已经在 transformColumnsForTwoLevel 中正确设置