React 18中ReactDOM.render渲染表格列失效问题求助

React 18 废弃了 ReactDOM.render API，改用 createRoot，这直接导致你原来在 createdCell 回调里的写法失效并触发警告。以下是适配 React 18 的修改方案：

核心修改步骤 #

1. 从 react-dom/client 导入 createRoot：

import { createRoot } from 'react-dom/client';

2. 替换 createdCell 中的渲染逻辑，用 createRoot 把 React 组件挂载到目标单元格（td）中：

columns: [
    { data: 'id', name: 'id', title: 'Id' },
    { data: 'first_name', name: 'first_name', title: 'First Name' },
    { data: 'last_name', name: 'last_name', title: 'Last Name' },
    { data: 'email', name: 'email', title: 'Email' },
    { data: 'status', name: 'status', title: 'Status' },
    { data: 'action', name: 'action', title: 'Action' }
],
columnDefs: [
    {
        targets: 5,
        createdCell: (td, cellData, records, row, col) => {
            // 创建根节点并将组件渲染到当前td内
            const root = createRoot(td);
            root.render(
                <div className="d-flex text-nowrap">
                    Hello
                    {/* 可添加自定义操作按钮，直接使用当前行数据records */}
                    <button onClick={() => console.log('编辑:', records)} className="btn btn-sm btn-primary ms-2">编辑</button>
                    <button onClick={() => console.log('删除:', records.id)} className="btn btn-sm btn-danger ms-2">删除</button>
                </div>
            );
        }
    }
]

注意事项 #

• 确保你的项目已经安装 React 18 及对应版本的 react-dom
• 若表格存在销毁、分页或重新渲染场景，建议在表格的销毁回调中调用 root.unmount() 清理根节点，避免内存泄漏
• 渲染的组件可直接访问 createdCell 回调中的参数（如当前行数据 records），实现行级操作逻辑

内容的提问来源于stack exchange，提问作者Rajeev Singh