Я безуспешно пытался создать оболочку Kotlin JS для библиотеки PayPal Downshift.Я могу заставить 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
, и он отображается в моем пакете.Файл 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"
}
}
Вот стандартный импорт при использовании компонентаact / jsx
import Downshift from "downshift";
, который соответствует аннотациям @file:JsModule("downshift") и @JsName("Downshift").
Любая помощь в получении этой работы будет оценена