无法在表格单元格动态插入React图标，遇appendChild Node类型错误

你遇到的报错是因为appendChild只能接收真实的DOM节点，但你传入的是字符串形式的JSX代码——React的JSX需要被编译渲染成DOM节点后才能插入到原生DOM结构中，直接传字符串肯定不合法。

下面给两种可行的解决方法：

方法一：用ReactDOM渲染图标到原生DOM元素中 #

如果你必须用原生DOM操作来插入单元格，可以通过ReactDOM把图标组件渲染到你创建的div里：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RiDeleteBin6Line } from '@fortawesome/react-icons/ri';

const iconCell = row.insertCell(4);
const iconDiv = document.createElement('div');
iconCell.appendChild(iconDiv);

// React 18及以上版本写法
const root = ReactDOM.createRoot(iconDiv);
root.render(<FontAwesomeIcon icon={RiDeleteBin6Line} />);

// React 18以下版本写法
// ReactDOM.render(<FontAwesomeIcon icon={RiDeleteBin6Line} />, iconDiv);

方法二：用React JSX直接构建表格（推荐） #

在React项目中，更符合规范的方式是直接用JSX来定义表格结构，避免原生DOM操作：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RiDeleteBin6Line } from '@fortawesome/react-icons/ri';

function MyTable() {
  // 假设这是你的表格数据
  const tableData = [
    { id: 1, content: '第一行内容' },
    { id: 2, content: '第二行内容' }
  ];

  return (
    <table>
      <tbody>
        {tableData.map(item => (
          <tr key={item.id}>
            <td>{item.content}</td>
            {/* 直接在JSX中插入图标 */}
            <td>
              <FontAwesomeIcon icon={RiDeleteBin6Line} />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

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