与 kotlinJS 反应网格布局

问题描述

我开始尝试使用 Kotlinjs 并尝试让我的 kotlin 包装器工作，但没有成功。

任何人都有用于 react-grid-layout 的 kotlin 包装器开始工作？

由于没有打字稿定义，我也没有使用 flow 和 PropTypes 的经验，也许有人可以给我一个有用的提示？

任何人都有用于 react-grid-layout 的 kotlin 包装器开始工作？

我总是得到这样的东西：

@file:JsModule("react-grid-layout") // import GridLayout from "react-grid-layout";
@file:JsNonModule
package net.strml.reactgridlayout

import react.*

//@JsModule("prop-types")

@JsName("default")
//external val GridLayout: RClass<ReactGridLayoutProps>
external val reactGridLayout : RClass<ReactGridLayoutProps>
@JsName("default")
external val GridItem: RClass<GridItemProps>

external interface ReactGridLayoutProps : RProps {
    var className: String
    var width: Int
    var autoSize: Boolean? // = true
    var cols: Int? // = 12
    ....
    var resizeHandles: Array<String>? // = arrayOf("se")
    // resizeHandle?: ReactElement<any> | ((resizeHandleAxis: ResizeHandleAxis) => ReactElement<any>)
    var resizeHandle: ReactElement
    // onLayoutChange: (layout: Layout)  => void,var onLayoutChange:  (layouts: Array<Any>) -> Unit
    ...
}

external interface GridItemProps : RProps {
    var i: String
    var children: ReactElement

    // These are all in grid units,not pixels
    var x: Int
    var y: Int
    var w: Int
    var h: Int
    var minW: Int?
    var maxW: Int?
    var minH: Int?
    var maxH: Int?
    ....

Uncaught TypeError: Cannot read property 'element' of undefined
    at eval (GridItem.js?bea4:412)
    at Object.../../node_modules/react-grid-layout/build/GridItem.js (frontend.js:2630)
    at __webpack_require__ (frontend.js:30)
    at eval (ReactGridLayout.js?b5cc:17)
    at Object.../../node_modules/react-grid-layout/build/ReactGridLayout.js (frontend.js:2642)
    at __webpack_require__ (frontend.js:30)
    at eval (index.js?63db:1)
    at Object.../../node_modules/react-grid-layout/index.js (frontend.js:2701)
    at __webpack_require__ (frontend.js:30)
    at eval (frontend.js:3)
eval @ GridItem.js?bea4:412
../../node_modules/react-grid-layout/build/GridItem.js @ frontend.js:2630
__webpack_require__ @ frontend.js:30
eval @ ReactGridLayout.js?b5cc:17
../../node_modules/react-grid-layout/build/ReactGridLayout.js @ frontend.js:2642
__webpack_require__ @ frontend.js:30
eval @ index.js?63db:1
../../node_modules/react-grid-layout/index.js @ frontend.js:2701
__webpack_require__ @ frontend.js:30
eval @ frontend.js:3
eval @ frontend.js:8
./kotlin-dce-dev/frontend.js @ frontend.js:4361
__webpack_require__ @ frontend.js:30
0 @ frontend.js:4461
__webpack_require__ @ frontend.js:30
(anonymous) @ frontend.js:94
(anonymous) @ frontend.js:97
webpackUniversalModuleDeFinition @ frontend.js:9
(anonymous) @ frontend.js:10
client?c742:52 [WDS] Live Reloading enabled.
...

javascript：

GridItem.propTypes = {
  // Children must be only a single element
  children: _react.PropTypes.element,// General grid attributes
  cols: _react.PropTypes.number.isrequired,containerWidth: _react.PropTypes.number.isrequired,rowHeight: _react.PropTypes.number.isrequired,margin: _react.PropTypes.array.isrequired,maxRows: _react.PropTypes.number.isrequired,containerPadding: _react.PropTypes.array.isrequired,// These are all in grid units
  x: _react.PropTypes.number.isrequired,y: _react.PropTypes.number.isrequired,w: _react.PropTypes.number.isrequired,h: _react.PropTypes.number.isrequired,...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）