React Hooks项目中column.js调用Table.js的openModal打开模态框实现

核心逻辑就是把Table组件内维护的openModal回调，注入到column.js的列配置生成函数中，所有状态全部收敛在合法的React组件内管理，完全规避Hook使用规则报错。

1. 改造column.js的导出形式 #

不要导出固定的列配置数组，改成导出一个接收回调参数的纯函数，删除按钮的点击事件直接调用传入的回调即可，column.js不需要引入任何React相关的Hook或组件逻辑：

// column.js
export const getColumns = (onDeleteClick) => [
  // 其他列配置自行补充
  {
    title: '操作',
    key: 'action',
    width: 120,
    render: (_, record) => (
      <button type="button" onClick={() => onDeleteClick(record)}>删除</button>
    )
  }
]

2. 在Table.js中生成列配置并传入openModal #

Table.js作为合法的React组件，本身就维护了模态框的状态和openModal方法，直接将openModal作为参数传给getColumns拿到最终的列配置即可：

// Table.js
import { useState } from 'react'
import { Table, Modal } from 'antd' // 适配你自己使用的UI库即可，逻辑通用
import { getColumns } from './column'

const CustomTable = () => {
  const [modalVisible, setModalVisible] = useState(false)
  const [currentRow, setCurrentRow] = useState({})
  // 表格数据源根据你的业务自行调整
  const tableData = []

  const openModal = (rowData) => {
    setCurrentRow(rowData)
    setModalVisible(true)
  }

  // 动态生成列配置，注入openModal回调
  const columns = getColumns(openModal)

  return (
    <div>
      <Table columns={columns} dataSource={tableData} rowKey="id" />
      <Modal
        title="删除确认"
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={() => {
          // 此处可使用currentRow执行删除业务逻辑
          setModalVisible(false)
        }}
      >
        确认删除该条数据吗？
      </Modal>
    </div>
  )
}

export default CustomTable

说明 #

这种方案完全符合Hook的使用规则：所有Hook都只在React函数组件顶层调用，纯配置文件只负责生成视图配置，不维护任何状态或业务逻辑，数据传递链路清晰，也方便后续维护扩展其他操作列的交互逻辑。

内容的提问来源于stack exchange，提问作者Shikhil Dev