9

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

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

如何将该行翻译成 Kotlin？我没有使用 Gradle。

4

2 回答 2

20

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

考虑以下 javascript 代码

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

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

按钮.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

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

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

编辑：这里有一个 material-ui 组件的社区包装器

提示：使用方式 1，如您所见，它不那么冗长

于 2018-10-14T07:02:14.540 回答
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)功能。

于 2018-07-19T21:38:25.313 回答