当 Kotlin 爱上 React

本文首发于 youngxhui.top

说起 Kotlin，听说过的大部人第一反应是一门开发 Android 的语言。不得不说 Google 对 Kotlin 的宣传远远的大于了 Kotlin 的创始公司 Jetbrains 。

Kotlin 不仅仅是能写Android，而且可以写服务端，可以说只要可以写Java的地方，就可以用Kotlin来进行替换。当然Kotlin远不止这些。目前Kotlin可以做到以下平台的开发和使用。jvm,android,js和native(beta)。正因为可以开发 Native ，所以Kotlin现在对 ios 开发也是支持的，虽然看起来效果不是那么的好。

今天进行的 Kotlin 进行 react 开发，这只是对 KotlinJs 的一次尝试和使用。

环境

• 浏览器：Microsoft Edge 77.0.235.5 (官方内部版本) dev(64 位)

• Kotlin: 1.3.12

安装环境

很早以前，kotlin 官网就出现了两个库，这两个库基本就是来完善 react 在 kotlin 中的生态，第一个是 JetBrains/create-react-kotlin-app ，一个生成 React 工程的脚手架；第二个是JetBrains/kotlin-wrappers ，该库里存放了 react 周边生态组件，比如说 router，redux 等等。

按照脚手架文档，一行代码便能生成我们的项目。

npx create-react-kotlin-app my-app

在项目生成后，打开项目，使用 npm start 或者 yarn start 启动项目。

项目会自动打开浏览器，然后看到我们的项目，说明我们的项目便启动了。

我们可以看看官方提供的 wrappers 库里有什么，好像什么都有就是缺少一个成熟的 UI 组件库。难道说所有的样式都要我们自己写？

当然不是。

kotlinjs 是可以调用到 nodejs 模块的，只不过啊，有点烦。

安装 ant

ant 是 阿里前端 开发的一套 UI 组件，其中有着 React 版本。首先要安装该库。

通过 yarn add antd 进行安装,等待安装完成。

安装结束后，我们将 ant的演示引入到我们的项目中，打开 index.css 引入项目。

@import '~antd/dist/antd.css';

我们尝试的引入一个 Button 看看。

然后我们看到页面上，还是原来的button ，和 ant 的风格没有半毛钱关系。说明我们还是没有讲ant的组件使用到我们的项目中去。

绑定 UI 控件

新建立一个包 ui/ant 来存放我们与 ant 组件的绑定类。

如何编写我们的绑定类？这是我遇到的第一个难题。

首先要找到我们的 node_modules中的antd目录，找到我们要绑定的控件目录。

我们用 @file:JsModule("antd/lib/button") 来表明绑定目录。通过 @JsName("default") 来进行绑定，此时需要该控件是以 export default Button;

@file:JsModule("antd/lib/button")

package ui.ant

import react.RClass
import react.RProps

@JsName("default")
external val button: RClass<RProps>

在我们的 Main.kt 中重新引入我们刚刚写的 button。此时的 button 不同于 react.dom.button ,我们所声明的 button 无法直接设置任何属性，方法等。当然我们会给他设置的。

package app

import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div

class App : RComponent<RProps, RState>() {
   
    override fun RBuilder.render() {
   
        div {
   
            ui.ant.button {
   
                +"Button"
            }
        }
    }
}

fun RBuilder.app() = child(App::class) {
   }

等待自动编译和刷新完成，查看我们的页面。

终于见到了我们的按钮了，而且样式和 Ant 官方文档上所示一致。

说明我们的绑定现在已