javascript - 围绕 Paypal Downshift 创建一个 Kotlin React Wrapper

Question

我一直在尝试围绕 PayPal Downshift 库创建 Kotlin JS 包装器，但没有成功。我可以让 Downshift 在 Kotlin 生态系统之外正常工作，但在尝试将它集成到 Kotlin JS 应用程序时我运气不好。

我已将所有属性剥离为以下内容:-

@file:JsModule("downshift")

package components.downshift

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

@JsName("Downshift")
external class DownshiftComponent : Component<RProps, RState> {
    override fun render(): ReactElement?
}

然后在我的 React 应用程序的渲染方法中添加以下内容:-

child<RProps, DownshiftComponent> {  }

JSX 中的等价物在自定义组件中工作(尽管什么都不渲染!)

render() {
    return (
        <Downshift/>
    )
}

我最终遇到的错误如下:-

类型错误:无法读取未定义的属性“$metadata$”

getOrCreateKClass
node_modules/kotlin/kotlin.js:27368
  27365 | if (jClass === String) {
  27366 |   return PrimitiveClasses_getInstance().stringClass;
  27367 | }
> 27368 | var metadata = jClass.$metadata$;
        | ^  27369 | if (metadata != null) {
  27370 |   if (metadata.$kClass$ == null) {
  27371 |     var kClass = new SimpleKClassImpl(jClass);

对我来说，这表明无法找到“downshift”包中的类(因此未定义)。如果是这种情况，导入 Downshift 以便 Kotlin 可以使用它的正确方法是什么？

我已经使用 npm 安装了降档模块

npm install downsift --save

它显示在我的 package.json 文件中:-

{
  "name": "pop-up-shop-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.8.2",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/lab": "^3.0.0-alpha.28",
    "d3-shape": "^1.2.2",
    "downshift": "^3.2.0",
    "prop-types": "latest",
    "react": "^16.7.0",
    "react-autosuggest": "^9.4.3",
    "react-currency-format": "^1.0.0",
    "react-dom": "^16.7.0",
    "react-google-charts": "^3.0.10",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3"
  },
  "devDependencies": {
    "react-scripts-kotlin": "3.0.3"
  },
  "scripts": {
    "start": "react-scripts-kotlin start",
    "build": "react-scripts-kotlin build",
    "eject": "react-scripts-kotlin eject",
    "gen-idea-libs": "react-scripts-kotlin gen-idea-libs",
    "get-types": "react-scripts-kotlin get-types --dest=src/types",
    "postinstall": "npm run gen-idea-libs"
  }
}

这是使用 react/jsx 组件时的标准导入

import Downshift from "downshift";

它匹配 @file:JsModule("downshift") 和 @JsName("Downshift") 注释。

如能提供帮助，我们将不胜感激

Answer 1

几天前我遇到了这个问题。该错误非常令人困惑，但经过一番挖掘后，我发现问题出在类型(在您的情况下为 Downshift)未定义。在初始化 React 之前，您可以通过编写类似 prinltn(DownshiftComponent::class) 的内容来轻松捕获它。

问题可能与构建有关。不要忘记在其中添加 npm 依赖项。有时增量构建也会出现故障，您需要进行干净的构建才能看到更改。