如何在React-Kotlin中导入节点模块？ [英] How to import node module in React-Kotlin?

问题描述

我使用create-react-kotlin-app命令创建了一个应用程序，它可以很好地加载Chrome。我通过NPM添加了React Material UI包，这很成功。现在我如何在我的组件中使用Material UI模块？

I created an app using the create-react-kotlin-app command and it loads in Chrome fine. I added the React Material UI package via NPM and that was successful. Now how do I use the Material UI module in my component?

通常使用JavaScript，它是来自'@ material-ui /的简单导入按钮核心/按钮'位于组件文件的顶部，但Kotlin不喜欢这样。

Normally with JavaScript, it's a simple import Button from '@material-ui/core/Button' at the top of the component's file, but Kotlin doesn't like that.

如何将该行转换为Kotlin ？我没有使用Gradle。

How do I translate that line to Kotlin? I am not using Gradle.

推荐答案

我几天来一直在努力解决这个问题。我提出了以下解决方案。首先我们将看到多种声明外部模块的方法，然后我将展示如何使用它们
。

I have been struggling with this problem for days now. I came up with the following solution. First we will see multiple ways to declare external modules, then I will show how to use them .

考虑以下javascript代码

Consider the following javascript code

import Button from '@material-ui/core/Button' // this means button is exported as default

这将通过以下方式在kotlin中导入

This will be imported in kotlin in the following ways

Button.kt

Button.kt

@file:JsModule("@material-ui/core/Button")
@file:JsNonModule

package com.mypckage.mykillerapp

import react.Component
import react.RProps
import react.RState
import react.ReactElement

// way 1
@JsName("default") // because it was exported as default
external val Button : RClass<RProps>

// way 2
@JsName("default")
external class Button : Component<RProps,RState> {
    override fun render(): ReactElement?
}

但是，如果kotlin的语句必须与javascript import语句匹配bellow，

But again, if the statement intend for kotlin has to match the javascript import statement bellow,

import { Button } from "material-ui" // not exported as default

我们使用以下方法：Button.kt

We use the following approach: Button.kt

@file:JsModule("material-ui")
@file:JsNonModule

package com.mypckage.mykillerapp

import react.Component
import react.RProps
import react.RState
import react.ReactElement

// way 1
@JsName("Button") // because it was exported as default
external val Button : RClass<RProps>

// way 2
@JsName("Button")
external class Button : Component<RProps,RState> {
    override fun render(): ReactElement?
}

一旦你宣布如何使用你的组件，你可以使用它们如下：

once you have declared on how to use your components, you can just use them as follows:

//way 1:

fun RBuilder.render() {
    div {
        Button {
            attrs.asDynamic.className="submit-button"
            +"Submit"
        }
    }
}

//way 2:
fun RBuilder.render() {
    div {
        child(Button::class) {
            attrs.asDynamic.className="submit-button"
            +"Submit"
        }
    }
}

太棒了。您已导入组件。但是在那之前你不依赖于kotlin类型的安全性甚至代码完成，为了达到这个目的，你必须增加额外长度

great. you have imported your component. But until then your are not relying on kotlin type safety and even code completion, to achieve that, you have to go to extra length

如下所示

external interface ButtonProps: RProps {
    var className : String
    var onClick: (Event?)->Unit
    var color: String
    // . . .
    var href: String
}

然后继续将你的按钮声明为

then go ahead and declare your button as

@JsModule("@material-ui/core/Button")
@JsNonModule
@JsName("default") // because it was exported as default
external val Button : RClass<ButtonProps>

现在您可以将其用于类型安全和代码完成，如下所示

and you can now use it with type safety and code completion as shown bellow

fun RBuilder.render() {
    div {
        Button {
            attrs {
                className = "submit-button"
                onClick = {
                    window.alert("Vois La")   
                }
            }
            +"Submit"
        }
    }
}

希望这会有所帮助。快乐编码

Hope this helps. Happy coding

这篇关于如何在React-Kotlin中导入节点模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！