React中如何将指定DOM元素迁移到另一独立组件的对应位置

解决方案 #

优先方案：组件封装+Props透传（无需Portals） #

你的两个组件属于同一认证流程，SignUp是AuthFlow通过renderForm渲染的子组件，这种情况下用常规的React组件拆分+属性传递是最优解，代码更易维护，符合单向数据流规则。

1. 先把要迁移的div封装为独立可复用组件

// 封装公共组件 SignInTip.js
const SignInTip = ({ onJumpToSignIn }) => {
  return (
    <div className="mt-6">
      <p className="font-body text-white">
        已有账号？{' '}
        <span
          className="text-quad cursor-pointer"
          onClick={onJumpToSignIn}
        >
          登录
        </span>
      </p>
    </div>
  )
}

2. 修改AuthFlow.js，删除原有渲染逻辑，给renderForm传递updateFormType方法

// AuthFlow.js 改动后
{renderForm({ updateFormType })}
// 删掉原有的 formType === 'signUp' 条件渲染的div代码段

3. 在SignUp.js的目标位置引入组件渲染

// SignUp.js 改动后
<button
  className="transition-all transform hover:translate-y-1 rounded-md bg-tertiary py-3 mt-6 cursor-pointer border-2 border-transparent focus:outline-none focus:ring-2 focus:ring-tertiary focus:border-transparent"
  onClick={signIn}
  title="登录"
>
  登录
</button>
{/* 目标位置渲染迁移的组件 */}
<SignInTip onJumpToSignIn={() => props.updateFormType('signIn')} />
</form>

什么时候需要用Portals？ #

Portals适用场景是你需要把DOM节点渲染到当前父组件DOM树之外的位置，比如要规避父组件的overflow: hidden、z-index堆叠上下文限制，或者是弹窗、浮层这类全局组件的场景。你当前的需求只是同流程下组件内的结构调整，完全不需要用到Portals，反而会增加不必要的维护成本。

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