Reactjs中react-bootstrap Modal的container属性报错如何解决

• react-bootstrap Modal 的 container 属性不支持直接传入 CSS 选择器字符串，仅支持三类合法值：
  • 已挂载的真实 DOM 元素对象
  • 指向 DOM 元素的 ref 对象
  • 执行后返回 DOM 元素的回调函数
• 你传入类名字符串时，组件内部会判断传入值是否为 ref 类型，会执行 'current' in 传入值 逻辑，字符串不是对象，因此抛出你遇到的类型错误。

推荐两种可直接落地的实现方式：

1. 提前获取DOM元素后传入

import { useState, useEffect } from 'react'
import Modal from 'react-bootstrap/Modal'

function YourComponent() {
  const [modalContainer, setModalContainer] = useState(null)

  useEffect(() => {
    // 按类名获取指定容器
    const targetEle = document.querySelector('.你的容器类名')
    setModalContainer(targetEle)
  }, [])

  return (
    <Modal show={true} container={modalContainer}>
      {/* 模态框内容 */}
    </Modal>
  )
}

2. 传入回调函数（更简洁）

<Modal 
  show={true} 
  container={() => document.querySelector('.你的容器类名')}
>
  {/* 模态框内容 */}
</Modal>

注意：需要确保你指定的容器在 Modal 渲染前已经挂载到 DOM 树，否则获取到 null 会引发其他异常。

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