在Kotlin/JS中使用React Portals的方法求助

错误原因分析 #

你当前的写法存在两个核心问题：

1. 容器获取时机或ID不匹配：若HTML中未对应定义menu-root/modal-root容器，或在组件外部（顶层）过早获取DOM元素，会导致容器为null或Portal无法挂载到正确位置。
2. Portal渲染方式错误：第一种写法中未将createPortal的结果作为组件渲染内容的一部分；第二种写法中用+Modal将ReactPortal当作文本插入，而非直接渲染组件。

正确实现步骤 #

1. 确保HTML中存在目标容器

在页面的HTML文件中，添加主容器和模态框容器：

<div id="root"></div>
<div id="modal-root"></div>

2. 定义Modal组件

// Modal.kt
val Modal = FC<Props> {
    div(classes = "modal") {
        p {
            +"A proper modal"
        }
    }
}

3. 在App组件中正确使用createPortal

将Portal的创建放在App组件的渲染逻辑内，确保容器存在后再渲染：

// App.kt
val App = FC<Props> {
    // 获取模态框容器，添加空安全判断
    val modalContainer = document.getElementById("modal-root")
    modalContainer?.let { container ->
        createPortal(
            Modal.create(),
            container
        )
    }

    // 主应用内容
    div {
        +"Main Application Content"
    }
}

4. 主入口函数保持不变

fun main() {
    val container = document.getElementById("root") ?: error("Couldn't find root container!")
    createRoot(container).render(App.create())
}

关键注意点 #

• 始终确保HTML中的容器ID与代码中的查询ID完全一致。
• 避免在组件顶层（FC外部）获取DOM元素，因为此时DOM可能尚未完全加载，导致获取结果为null。
• 在Kotlin React的FC中，createPortal的结果可直接作为渲染内容的一部分，无需额外转换或调用。

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