如何在React中实现类似JQuery的after()函数功能？

React本身没有类似jQuery的after()这类直接操作DOM的API，也不推荐手动操作DOM实现该需求。React是数据驱动视图的框架，所有视图变化都应该对应到状态的变更，而非直接操作DOM节点。

你只需要把表格的行数据存在组件状态里，点击某一行的时候，往状态数组的对应位置插入你要新增的行数据，React会自动根据最新的状态渲染出目标新行，完全不需要手动操作DOM。

import { useState } from 'react';

function TableDemo() {
  // 初始表格行数据，每个项配置唯一id方便定位
  const [tableData, setTableData] = useState([
    { id: 1, name: '条目1', info: '第一行普通内容' },
    { id: 2, name: '条目2', info: '第二行普通内容' },
    { id: 3, name: '条目3', info: '第三行普通内容' },
  ]);

  const handleRowClick = (clickedRowId) => {
    // 查找点击行的数组下标
    const clickedIndex = tableData.findIndex(item => item.id === clickedRowId);
    // 构造要插入的新行数据，可自定义标记区分普通行和插入行
    const insertedRow = {
      id: Date.now(), // 生成唯一id，也可以用其他自定义规则
      isInserted: true,
      content: '这是点击后插入的行内容'
    };
    // 生成新数组，在点击行的下一个位置插入新数据
    const newTableData = [
      ...tableData.slice(0, clickedIndex + 1),
      insertedRow,
      ...tableData.slice(clickedIndex + 1)
    ];
    // 更新状态触发重渲染
    setTableData(newTableData);
  };

  return (
    <table border={1} cellPadding="8">
      <tbody>
        {tableData.map(row => {
          // 自定义不同行的渲染样式
          if (row.isInserted) {
            return (
              <tr key={row.id}>
                <td colSpan={2} style={{background: '#f5f5f5'}}>{row.content}</td>
              </tr>
            )
          }
          return (
            <tr key={row.id} onClick={() => handleRowClick(row.id)}>
              <td>{row.name}</td>
              <td>{row.info}</td>
            </tr>
          )
        })}
      </tbody>
    </table>
  )
}

export default TableDemo;

• 不要尝试用useRef拿到DOM节点后手动调用原生insertAfter之类的API插入节点，这种方式操作的DOM和React维护的虚拟DOM不同步，后续状态更新时会出现意料之外的渲染bug，还可能导致内存泄漏。
• 如果需要实现点击切换插入/删除插入行的效果，只需要在插入前判断对应位置是否已经有插入行，有的话删除对应状态项即可，所有逻辑都只需修改状态数组就能完成。
• 所有行的key必须唯一，不要用数组下标当key，否则插入行之后会出现渲染错乱的问题。

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