React:table组件/Pagination分页组件/Dialog组件 - 点击单元格内容显示弹窗，弹窗的内容由表格内容控制（2）

最新推荐文章于 2025-08-27 11:36:13 发布

原创

最新推荐文章于 2025-08-27 11:36:13 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

这篇博客详细介绍了如何在React应用中创建一个表格组件，结合Pagination分页功能，实现点击表格单元格后弹出Dialog对话框。Dialog组件由DialogOperation.jsx和Operation.jsx两部分构成，利用useCallback传递数据，确保弹窗内容根据表格数据动态更新。

（1）渲染了表格

（2）渲染弹窗-Dialog组件

Dialog组件由两个文件组成：DialogOperation.jsx 和 Operation.jsx

DialogOperation.jsx页面渲染：

其中子组件的值来源于父组件的usecallback：

import React, { useState,useRef, useCallback } from 'react';
import { Dialog } from '@alifd/next';
import Operation from './Operation';

const getDialogTitle = actionType => {
  switch (actionType) {
    case 'edit':
      return '跳转页面';
    case 'preview':
      return '预览';
  }
};  //可以通过增加case，进行多种状态切换

const DialogOperation = props => {
  const {
    actionType,
    dataSource,
    onOk = () => {},
    ...lastProps
  } = props;
  const operationRef = useRef(null);
  const [visible, setvisible] = useState