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语句匹配，

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

基于Creating a simple React component with Kotlin。

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)功能。

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

2 个答案: