┌─────────────────────────────────────┐
│  ThirdPartyForm (第三方組件)         │
│  ┌───────────────────────────────┐  │
│  │  字段 A                       │  │
│  ├───────────────────────────────┤  │
│  │  字段 B                       │  │
│  ├───────────────────────────────┤  │
│  │  ?? DOM 注入容器               │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │ React Portal 渲染       │  │  │
│  │  │ CustomField 組件        │  │  │
│  │  └─────────────────────────┘  │  │
│  ├───────────────────────────────┤  │
│  │  字段 C                       │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
const FormWithCustomField = () => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const [containerReady, setContainerReady] = useState(false)
  useEffect(() => {
    // 延遲執(zhí)行，等待第三方組件渲染完成
    const timer = setTimeout(() => {
      // 1. 定位目標(biāo)字段（通過(guò)特定屬性或類名）
      const targetField = document.querySelector('[data-field="fieldB"]')
      if (targetField) {
        // 2. 找到字段的容器元素
        const fieldContainer = targetField.closest('.form-item-wrapper')
        if (fieldContainer) {
          // 3. 創(chuàng)建注入容器
          const container = document.createElement('div')
          container.className = 'custom-field-container'
          container.style.marginTop = '16px'
          // 4. 插入到目標(biāo)字段之后
          fieldContainer.parentNode?.insertBefore(
            container,
            fieldContainer.nextSibling
          )
          // 5. 保存引用并標(biāo)記容器就緒
          containerRef.current = container
          setContainerReady(true)
        }
      }
    }, 100)
    // 清理函數(shù)：組件卸載時(shí)移除注入的 DOM
    return () => {
      clearTimeout(timer)
      if (containerRef.current) {
        containerRef.current.remove()
      }
    }
  }, [])
  return (
    <>
      <ThirdPartyForm {...formProps} />
      {/* 使用 Portal 將自定義組件渲染到注入的容器中 */}
      {containerReady && containerRef.current && createPortal(
        <CustomField />,
        containerRef.current
      )}
    </>
  )
}

import React, { useState, useImperativeHandle, forwardRef } from 'react'
interface CustomFieldProps {
  onChange?: (value: string) => void
}
export interface CustomFieldRef {
  getValue: () => string
  reset: () => void
}
const CustomField = forwardRef<CustomFieldRef, CustomFieldProps>(
  ({ onChange }, ref) => {
    const [value, setValue] = useState("")
    const handleChange = (newValue: string) => {
      setValue(newValue)
      onChange?.(newValue)
    }
    // 暴露方法給父組件
    useImperativeHandle(ref, () => ({
      getValue: () => value,
      reset: () => setValue("")
    }))
    return (
      <div className="custom-field">
        <label>自定義字段</label>
        <input
          type="text"
          value={value}
          onChange={(e) => handleChange(e.target.value)}
          placeholder="請(qǐng)輸入內(nèi)容"
        />
      </div>
    )
  }
)
export default CustomField

const FormWithCustomField = () => {
  const customFieldRef = useRef<CustomFieldRef>(null)
  const handleSubmit = () => {
    // 獲取自定義字段的值
    const customValue = customFieldRef.current?.getValue()
    // 整合所有表單數(shù)據(jù)
    const formData = {
      fieldA: '...',
      fieldB: '...',
      customField: customValue,
      fieldC: '...'
    }
    // 提交表單
    submitForm(formData)
  }
  return (
    <>
      <ThirdPartyForm onSubmit={handleSubmit} />
      {containerReady && containerRef.current && createPortal(
        <CustomField ref={customFieldRef} />,
        containerRef.current
      )}
    </>
  )
}

// ? 推薦：通過(guò) data 屬性定位
const target = document.querySelector('[data-field="fieldName"]')
// ? 推薦：通過(guò)特定類名定位
const container = target.closest('.form-item-wrapper')
// ? 推薦：通過(guò)元素類型和屬性組合
const input = document.querySelector('input[name="username"]')
// ?? 謹(jǐn)慎使用：通過(guò)索引定位（容易因 DOM 結(jié)構(gòu)變化而失效）
const item = document.querySelectorAll('.form-item')[2]

import { createPortal } from 'react-dom'
// 語(yǔ)法
createPortal(child, container)

useEffect(() => {
  // 創(chuàng)建和注入 DOM
  const container = document.createElement('div')
  document.body.appendChild(container)
  // 清理函數(shù)
  return () => {
    container.remove()
  }
}, [])

const timer = setTimeout(() => {
  // 查找和注入邏輯
}, 100)
return () => {
  clearTimeout(timer)
}

const ChildComponent = forwardRef<RefType, PropsType>((props, ref) => {
  useImperativeHandle(ref, () => ({
    methodA: () => { /* ... */ },
    methodB: () => { /* ... */ }
  }))
  return <div>...</div>
})
// 父組件使用
const childRef = useRef<RefType>(null)
childRef.current?.methodA()

/* 使用全局樣式 */
.custom-field-container {
  margin-bottom: 16px;
}
.custom-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

const container = document.createElement('div')
container.style.marginTop = '16px'
container.style.padding = '8px'

// ? 不推薦：脆弱的選擇器
const input = document.querySelector('.form > div:nth-child(2) input')
// ? 推薦：語(yǔ)義化選擇器
const input = document.querySelector('[data-field="username"]')
const container = input?.closest('.form-item')

useEffect(() => {
  const timer = setTimeout(() => {
    const target = document.querySelector('.target-element')
    if (!target) {
      console.warn('DOM 注入失?。何凑业侥繕?biāo)元素')
      return
    }
    // 注入邏輯...
  }, 100)
  return () => clearTimeout(timer)
}, [])

const [containerReady, setContainerReady] = useState(false)
// 只有容器就緒后才渲染 Portal
{containerReady && containerRef.current && createPortal(
  <Component />,
  containerRef.current
)}

function usePortalInjection(selector: string, delay = 100) {
  const containerRef = useRef<HTMLElement | null>(null)
  const [ready, setReady] = useState(false)
  useEffect(() => {
    const timer = setTimeout(() => {
      const target = document.querySelector(selector)
      if (target) {
        const container = document.createElement('div')
        container.className = 'portal-container'
        target.parentNode?.insertBefore(container, target.nextSibling)
        containerRef.current = container
        setReady(true)
      }
    }, delay)
    return () => {
      clearTimeout(timer)
      containerRef.current?.remove()
    }
  }, [selector, delay])
  return { container: containerRef.current, ready }
}
// 使用示例
const MyComponent = () => {
  const { container, ready } = usePortalInjection('[data-field="email"]')
  return (
    <>
      <ThirdPartyForm />
      {ready && container && createPortal(
        <CustomField />,
        container
      )}
    </>
  )
}

useEffect(() => {
  const observer = new MutationObserver(() => {
    const target = document.querySelector('.target-element')
    if (target && !containerRef.current) {
      // 創(chuàng)建和注入容器
      const container = document.createElement('div')
      target.parentNode?.insertBefore(container, target.nextSibling)
      containerRef.current = container
      setContainerReady(true)
      // 找到目標(biāo)后停止觀察
      observer.disconnect()
    }
  })
  observer.observe(document.body, {
    childList: true,
    subtree: true
  })
  return () => {
    observer.disconnect()
    containerRef.current?.remove()
  }
}, [])