我一直在尝试围绕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应用的render方法中添加以下内容:
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);
对我来说,这表明找不到“降档”包中的类(因此未定义)。如果是这种情况,那么Kotlin可以使用导入Downshift的正确方法是什么?
我已经使用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")
批注。任何帮助使这项工作将不胜感激
最佳答案
我几天前遇到了这个问题。该错误非常令人困惑,但是经过一番挖掘,我发现问题出在未定义类型(在您的情况下为Downshift
)。您可以在初始化react之前编写类似于prinltn(DownshiftComponent::class)
的代码轻松捕获它。
问题可能出在构建上。不要忘记在其中添加npm依赖项。同样,有时会出现增量构建故障,您需要进行全新构建才能查看更改。