如何在React-Kotlin中导入节点模块？

Question

我使用create-react-kotlin-app命令创建了一个应用，并且可以在Chrome中正常加载。我通过NPM添加了React Material UI包，并成功了。现在如何在组件中使用Material UI模块？

通常使用JavaScript，它很简单import Button from '@material-ui/core/Button'，位于组件文件的顶部，但是Kotlin不喜欢这样。

如何将那条线翻译成Kotlin？我没有使用Gradle。

Answer 1

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

考虑以下javascript代码

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

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

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 { Button } from "material-ui" // not exported as default

我们使用以下方法：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?
}

声明如何使用组件后，就可以按以下方式使用它们：

//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类型安全性甚至代码完成，要实现这一点，您就得花更多的时间了

如图所示

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

然后继续并声明您的按钮为

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

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

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

希望这可以帮助。快乐编码

Answer 2

Kotlin 导入依赖项的方式接近标准 JS 导入：

import React from 'react';

export function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

基于使用 Kotlin 创建简单的 React 组件。

package hello

import react.*
import react.dom.*

fun RBuilder.hello(name: String) {
    h1 {
        +"Hello, $name"
    }
}

通常（因为 Kotlin 是基于 Java 的）它使用 Gradle 工具来处理依赖关系：

// part of build.gradle
kotlinFrontend {
    // ...

    npm {
        // ...

        dependency("react")
        dependency("react-dom")
        dependency("react-router")
        dependency("react-markdown")

        devDependency("css-loader")
        devDependency("babel-core")
        // ...
    }

并像上面一样引用：

HomeView.kt：

// https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/HomeView.kt

import kotlinx.html.*
import org.jetbrains.demo.thinkter.model.*
import react.*
import react.dom.*
import kotlinx.coroutines.experimental.launch

ReactMarkdown.kt：

// https://github.com/Kotlin/kotlin-fullstack-sample/blob/master/frontend/src/org/jetbrains/demo/thinkter/ReactMarkdown.kt

package org.jetbrains.demo.thinkter

import react.*

private val ReactMarkdown: dynamic = runtime.wrappers.require("react-markdown")

基于：kotlin-fullstack-sample

另外还create-react-kotlin-app面临着使用注释导入的可能性@JsModule()，而依赖关系管理是通过以下标准方式处理的package.json：

// src/logo/Logo.kt (outcome of creating new app)
package logo

import react.*
import react.dom.*
import kotlinext.js.*
import kotlinx.html.style

@JsModule("src/logo/react.svg")
external val reactLogo: dynamic
@JsModule("src/logo/kotlin.svg")
external val kotlinLogo: dynamic

并且也可以成功用于 JS 库导入。

另一种方法是使用kotlinext.js.*：

// index/index.kt

import kotlinext.js.*

fun main(args: Array<String>) {
    requireAll(require.context("src", true, js("/\\.css$/")))

    // ...
}

它还提供了require(module: String)功能。