kotlin 如何从外部js库添加react组件?

nkoocmlb  于 2023-03-09  发布在  Kotlin
关注(0)|答案(1)|浏览(130)

我尝试从外部库添加一个组件到我的react项目,但是当我在浏览器中打开页面时,我收到一个错误:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at createFiberFromTypeAndProps (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:28434:17)
    at createFiberFromElement (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:28460:15)
    at createChild (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15109:28)
    at reconcileChildrenArray (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15404:25)
    at reconcileChildFibers (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:15821:16)
    at reconcileChildren (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:19162:28)
    at mountIndeterminateComponent (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:20152:5)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:21582:16)
    at beginWork$1 (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:27421:14)
    at performUnitOfWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:26552:12)

链接到库中的组件:https://github.com/rouftom/react-mui-scheduler/blob/main/src/Scheduler.jsx
我的身材。gradle。kts:

val jsMain by getting {
    dependencies {
        implementation(project.dependencies.enforcedPlatform(kotlinw("wrappers-bom:1.0.0-pre.505")))

        implementation(kotlinw("react"))
        implementation(kotlinw("react-dom"))
        implementation(kotlinw("react-router-dom"))

        implementation(kotlinw("emotion"))
        implementation(kotlinw("mui"))
        implementation(kotlinw("mui-icons"))

        implementation(npm("react-mui-scheduler", "2.0.3"))

        implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.3")

        implementation("io.ktor:ktor-client-js:$ktorVersion")
        implementation("io.ktor:ktor-serialization-kotlinx-json-js:$ktorVersion")
        implementation("io.ktor:ktor-client-content-negotiation-js:$ktorVersion")

    }
}

下面是我尝试使用的代码:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

e37o9pze

e37o9pze1#

通过键入在两天内找到了工作解决方案

@file:JsModule("react-mui-scheduler")
@file:JsNonModule

package com.company.gui.common.external.scheduler

import react.Props

external interface SchedulerProps : Props {
    var options: MuiSchedulerOptions
    var alertProps: dynamic
    var toolbarProps: dynamic
    var onCellClick: CellClickHandler
    var onTaskClick: TaskClickHandler
    var onEventsChange: EventsChangeHandler
    var onAlertCloseButtonClicked: AlertCloseButtonClickedHandler
    var events: Array<SchedulerEvent>
    var locale: MuiSchedulerLocale?
}

@JsName("default")
external val Scheduler: react.FC<SchedulerProps>

相关问题