如何在Kotlin/JS中使用及集成React/JS常用开发库？

嘿，很高兴你正在探索Kotlin/JS + React的组合！刚上手的时候遇到这些困惑真的太正常了，我来一步步给你捋清楚怎么搞定JS库的集成和调用～

第一步：确认依赖添加正确 #

你已经知道用implementation(npm("库名", "版本号"))来添加npm库，比如要集成lodash的话，在build.gradle.kts里这么写：

implementation(npm("lodash", "4.17.21"))

这一步是把JS库拉到项目里，但因为Kotlin是静态类型语言，直接调用会没有类型提示，所以需要**类型绑定（也就是你说的wrapper）**来让Kotlin识别JS库的结构。

第二步：优先用现成的官方/社区Wrapper #

很多流行的React库（比如React Router、Material-UI、Redux等）都有现成的Kotlin/JS绑定包，这些是社区或JetBrains官方维护的，不用自己写wrapper就能直接用。

比如要加React Router的绑定，直接添加Maven依赖就行：

implementation("org.jetbrains.kotlin-wrappers:kotlin-react-router-dom:6.3.0-pre.490")

用法和原生JS库对应，只是换成了Kotlin的语法，比如用Route组件、useNavigate钩子这些，和你写JS React的逻辑几乎一致，只是类型更安全。

第三步：自己写Wrapper的入门指南 #

如果找不到现成的Wrapper，那就需要自己动手写，其实核心就是用Kotlin的external关键字声明JS里的实体，下面给你举几个简单的例子：

1. 声明普通JS函数/对象 #

假设你要集成一个叫my-utils的小工具库，它导出了add函数和User类，那Wrapper可以这么写：

// 方式一：用dynamic快速调用（适合快速验证，无类型检查）
@JsModule("my-utils")
@JsNonModule
external val myUtils: dynamic

// 方式二：类型安全的声明（推荐，有类型提示和检查）
@JsModule("my-utils")
@JsNonModule
external fun add(a: Int, b: Int): Int

@JsModule("my-utils")
@JsNonModule
external class User(name: String) {
    fun greet(): String
}

• @JsModule：告诉Kotlin这个实体来自npm模块
• external：标记这是JS中定义的外部实体，Kotlin不会编译它，只做调用

然后在代码里调用：

// dynamic方式
val sum = myUtils.add(2, 3)

// 类型安全方式
val sumSafe = add(2, 3)
val user = User("Archie")
println(user.greet())

2. 声明React组件 #

如果是React组件库，比如导出了一个MyButton组件，那Wrapper需要对应React的组件类型：

import react.RClass
import react.RProps

@JsModule("my-react-components/MyButton")
@JsNonModule
external val MyButton: RClass<MyButtonProps>

// 声明组件的Props类型
external interface MyButtonProps : RProps {
    var text: String
    var onClick: (() -> Unit)?
}

然后在Kotlin React代码里像用原生组件一样使用：

MyButton {
    text = "Click Me"
    onClick = { println("Button clicked!") }
}

一些实用小技巧 #

• 先查库的JS文档或用console.log输出导出内容，搞清楚它的结构再写Wrapper
• 可以先用dynamic快速验证调用是否可行，没问题再改成类型安全的external声明
• 复杂库可以拆分Wrapper到不同文件，按功能组织，保持代码整洁

刚开始写Wrapper可能会有点繁琐，但写多了就会发现规律，先从简单的库练手，慢慢就上手啦～

备注：内容来源于stack exchange，提问作者Archie G. Quiñones