将 3rd 方 React 组件导入 kotlin.js 项目的正确方法是什么？答案

【问题标题】：What is the right way to import 3rd party React components into the kotlin.js project?将 3rd 方 React 组件导入 kotlin.js 项目的正确方法是什么？
【发布时间】：2018-08-24 19:28:36
【问题描述】：

我正在尝试在我的create-react-kotlin-app 中使用这个库：

https://material-ui-next.com/

我想生成一堆类型安全的包装器。我是这样开始的：

@file:JsModule("material-ui")

package material

import react.RState
import react.React
import react.ReactElement

external class Typography : React.Component<dynamic, RState> {
    override fun render(): ReactElement
}

...

fun RBuilder.typography(
    classes: String = "",
    variant: Variant = Variant.body1,
    align: Align = Align.inherit,
    color: Color = Color.default,
    gutterBottom: Boolean = false,
    noWrap: Boolean = false,
    paragraph: Boolean = false,
    handler: RHandler<dynamic>
) = child(Typography::class) {
    attrs {
        this.className = classes
        this.align = align.name
        this.color = color.name
        this.variant = variant.name
        this.gutterBottom = gutterBottom
        this.noWrap = noWrap
        this.paragraph = paragraph
    }
    handler()
}

并像这样使用它：

typography(variant = Variant.title, color = Color.inherit) {
    +"Hello World"
}

这是正确的方法吗？

【问题讨论】：

标签： reactjs kotlin kotlin-js-interop kotlin-frontend create-react-kotlin-app

【解决方案1】：

我也有兴趣在 Kotlin 代码中添加一个 ReactJS 3rd 方组件。请查看以下帖子，我将不胜感激有关那里提出的解决方案的任何反馈：

How to import node module in React-Kotlin?

【讨论】：

【解决方案2】：

确实是正确的方法，但可以使其成为最好的方法如下

MaterialUi.kt

@file:JsModule("material-ui")

package material

import react.RState
import react.RProps
import react.React
import react.ReactElement

external interface TypographyProps : RProps {
    var className: String
    var align : String
    var color : String
    var variant : String
    var gutterBottom : String
    var noWrap : String
    var paragraph : String
}

@JsName("Typography")
external class Typography : RComponent<TypographyProps, RState> {
    override fun render(): ReactElement
}

然后创建另一个文件，比如说

MaterialUiDsl.kt

fun RBuilder.typography(
    classes: String = "",
    variant: Variant = Variant.body1,
    align: Align = Align.inherit,
    color: Color = Color.default,
    gutterBottom: Boolean = false,
    noWrap: Boolean = false,
    paragraph: Boolean = false,
    handler: RHandler<TypographyProps> // notice the change here
) = child(Typography::class) {
    attrs {
        this.className = classes
        this.align = align.name
        this.color = color.name
        this.variant = variant.name
        this.gutterBottom = gutterBottom
        this.noWrap = noWrap
        this.paragraph = paragraph
    }
    handler()
}

如果上面的文件对你来说已经很冗长（就像我经常感觉的那样），你可以把它改成只是

MaterialUiDsl.kt

fun RBuilder.typography(handler: RHandler<dynamic>) = child(Typography::class,handler)

你可以随时使用它

typography {
    attr {
        className = "my-typo"
        color = "#ff00ff"
        //. . .
    }
}

简单易懂

【讨论】：