如何在Simple-dataTables中使用React Link组件，避免页面刷新与“object Object”显示

你遇到的问题本质是：Simple-dataTables是基于原生DOM的表格库，它接收的data数组仅支持字符串类型。直接传入React的<Link>组件时，该组件本质是JavaScript对象，被转成字符串后就显示为object Object；而用原生<a>标签会触发整页刷新，不符合React单页应用的需求。

下面提供两种可行的优化方案：

方案1：使用useNavigate钩子实现无刷新跳转 #

这种方式无需在表格数据里插入React组件，通过监听点击事件，用React Router的useNavigate完成跳转，实现更简单。

import { useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import DataTable from 'simple-datatables';

function TeamTable({ accountItems }) {
  const navigate = useNavigate();
  const tableRef = useRef(null);

  useEffect(() => {
    // 初始化表格，Action列用带data-id的按钮占位
    const dataTable = new DataTable(tableRef.current, {
      data: {
        headings: ["First Name", "Action"],
        data: Object.entries(accountItems).map(([_, value]) => {
          return [
            value.firstName,
            `<button class="view-details-btn" data-id="${value.id}">View Details</button>`
          ];
        })
      },
    });

    // 监听表格内的点击事件，触发无刷新跳转
    tableRef.current.addEventListener('click', (e) => {
      if (e.target.classList.contains('view-details-btn')) {
        const itemId = e.target.getAttribute('data-id');
        navigate(`/management-edit/${itemId}`);
      }
    });

    // 组件卸载时销毁表格实例
    return () => dataTable.destroy();
  }, [accountItems, navigate]);

  return <table ref={tableRef}></table>;
}

export default TeamTable;

方案2：用React.createPortal挂载Link组件 #

如果需要直接使用<Link>组件的原生特性（比如路由激活状态样式），可以用createPortal把React组件挂载到表格渲染后的DOM节点上。

import { useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { Link } from 'react-router-dom';
import DataTable from 'simple-datatables';

function TeamTable({ accountItems }) {
  const tableRef = useRef(null);

  useEffect(() => {
    // 初始化表格，Action列留空容器占位
    const dataTable = new DataTable(tableRef.current, {
      data: {
        headings: ["First Name", "Action"],
        data: Object.entries(accountItems).map(([_, value]) => {
          return [
            value.firstName,
            `<span class="link-container-${value.id}"></span>`
          ];
        })
      },
    });

    // 为每个占位容器挂载Link组件
    accountItems.forEach(item => {
      const container = tableRef.current.querySelector(`.link-container-${item.id}`);
      if (container) {
        createPortal(
          <Link to={`/management-edit/${item.id}`}>View Details</Link>,
          container
        );
      }
    });

    return () => dataTable.destroy();
  }, [accountItems]);

  return <table ref={tableRef}></table>;
}

export default TeamTable;

方案说明 #

• 方案1更轻量化，无需处理React组件与原生DOM的挂载逻辑，适合大多数场景；
• 方案2保留了<Link>组件的所有React Router特性，适合需要利用路由激活样式、导航守卫等功能的场景。

内容的提问来源于stack exchange，提问作者Action Coding