Как правильно импортировать сторонние компоненты React в проект kotlin.js?

Question

Я пытаюсь использовать эту библиотеку в моем приложении create-реагировать-kotlin-приложения:

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"
}

Это правильный подход?

Answer 1

На самом деле это правильный путь, но он может стать лучшим, как следует

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"
        //. . .
    }
}

Очень просто

Answer 2

Я также заинтересован в добавлении стороннего компонента ReactJS в код Kotlin. Пожалуйста, ознакомьтесь со следующим постом. Буду признателен за любые отзывы о предлагаемых там решениях:

Как импортировать модуль узла в React-Kotlin?