在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/>
    )
}

我最終得到的錯誤如下： -

TypeError：無法讀取undefined的屬性'$ 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的正確方法是什么，以便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 ）。 在初始化反應之前，您可以通過編寫類似prinltn(DownshiftComponent::class)輕松捕獲它。

問題可能在於構建。 不要忘記在其中添加npm依賴項。 有時也會增加構建故障，你需要做一個干凈的構建來查看更改。