React中如何正确实现自定义组件在指定元素前后渲染

首先明确核心认知：从原生DOM开发转React的最大思维坎，就是总想延续“手动创建节点、定位位置、手动插入DOM”的操作链路，但React的设计逻辑是声明式UI、所有DOM更新由框架自动调度，用户手动操作DOM插入的方式不仅违背框架设计初衷，还很容易出现虚拟DOM和真实DOM状态不匹配的问题。
下面分场景对应讲标准实现，完全贴合学习React正确范式的目标：

1. 目标节点在React渲染树内：纯声明式实现（推荐优先学习） #

如果你的目标节点本身就是React组件树里的一部分（也就是最终是React渲染出来的元素），根本不需要用到任何DOM插入API，直接用状态+条件渲染就能实现等价的“前后插入错误区块”的效果：

• 把错误区块的显示/隐藏、内容配置完全绑定到组件状态上
• 把JSX结构直接写在目标节点的前后位置，代替原来的node.before()/node.after()
  示例代码：

import { useState } from 'react';

// 抽离独立的错误区块组件，代替原来的createErrorSection函数
function ErrorSection({ name, title, description }) {
  return (
    <section id={name} className='section-error'>
      <div className='section-error-container'>
        <h2>{title}</h2>
        <p>{description}</p>
      </div>
    </section>
  )
}

function PageContent() {
  // 用状态存错误区块的配置，为空就不渲染
  const [errorConfig, setErrorConfig] = useState(null);

  return (
    <div className="page-wrapper">
      {/* 对应原来的 node.before(section) 逻辑 */}
      {errorConfig?.position === 'before' && (
        <ErrorSection 
          name={errorConfig.name}
          title={errorConfig.title}
          description={errorConfig.description}
        />
      )}

      {/* 你要插入错误区块的目标节点 */}
      <div className="user-profile-card">
        <h3>用户信息</h3>
        <button>提交修改</button>
      </div>

      {/* 对应原来的 node.after(section) 逻辑 */}
      {errorConfig?.position === 'after' && (
        <ErrorSection 
          name={errorConfig.name}
          title={errorConfig.title}
          description={errorConfig.description}
        />
      )}
    </div>
  )
}

这种写法完全符合React的声明式开发思路，不需要碰任何原生DOM操作，状态变更后React会自动处理节点的插入、更新、销毁，是学习阶段最应该掌握的核心范式。

2. 目标节点不在React渲染树内：用Portal实现跨边界插入（混改场景标准方案） #

如果你的目标节点是个人网站里早就用原生HTML/JS写死的老元素，没法把它迁到React组件树里，这时候React官方提供的createPortalAPI就是专门解决这类需求的，根本不需要手动拼HTML字符串、也不需要手动调原生DOM做节点挂载：

• 实现步骤：
  1. 找到你要插入位置的目标原生DOM节点
  2. 在目标节点的前/后位置插入两个空的占位DOM节点，作为Portal的渲染挂载点
  3. 在React组件中通过createPortal把你的ErrorSection组件，渲染到对应的占位节点里
     示例代码：

import { createPortal } from 'react-dom';

// 拿到页面上已有的、非React托管的目标节点
const targetOldNode = document.querySelector('.static-intro-card');
// 在目标节点前面创建占位挂载点
const beforeMount = document.createElement('div');
targetOldNode.before(beforeMount);
// 在目标节点后面创建占位挂载点
const afterMount = document.createElement('div');
targetOldNode.after(afterMount);

function PortalErrorSection({ position, name, title, description }) {
  // 根据传入的位置参数，选择对应的挂载点
  const mountContainer = position === 'before' ? beforeMount : afterMount;
  // 通过Portal把组件渲染到指定DOM位置
  return createPortal(
    <ErrorSection name={name} title={title} description={description} />,
    mountContainer
  )
}

Portal的特性是：组件的状态、事件冒泡依然遵循正常的React树规则，只是最终渲染出的DOM结果会输出到你指定的位置，完全不需要你手动处理JSX到真实DOM的转换，是新旧技术栈混改场景下的最优解。

3. 临时调试场景的快速实现（不推荐长期使用） #

如果只是临时做功能验证，不想引入Portal的逻辑，你也可以用createRoot创建一个独立的React根节点，把ErrorSection组件渲染到这个根节点对应的DOM元素上，再通过原生的before()/after()方法把这个DOM元素插到目标位置。但这种方式需要你在组件销毁的时候手动调用root.unmount()，否则会造成内存泄漏，而且脱离了React的统一调度体系，不建议在学习阶段作为主用写法。

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