如何从外部JS库中添加一个React组件?

huangapple go评论73阅读模式
英文:

How to add a react component from an external js library?

问题

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

错误:元素类型无效:预期是字符串(用于内置组件)或类/函数(用于组合组件),但得到的是对象。
    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

我的build.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")
    }
}

这是我尝试使用的代码:

import react.Props

@JsModule("react-mui-scheduler")
@JsNonModule
@JsName("default")
external val Scheduler: react.FC<Props>
@file:JsModule("react-mui-scheduler")
@file:JsNonModule

package com.company.external.scheduler

import react.Props

external val Scheduler: react.FC<Props>
val MyComponent = VFC {
    Scheduler()
}
英文:

I'm trying to add a component from an external library to my react project, but I get an error when I open the page in the browser:

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)

link to component from the library:
https://github.com/rouftom/react-mui-scheduler/blob/main/src/Scheduler.jsx

my build.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")

    }
}

Here is the code I tried to use:

import react.Props

@JsModule("react-mui-scheduler")
@JsNonModule
@JsName("default")
external val Scheduler: react.FC<Props>
@file:JsModule("react-mui-scheduler")
@file:JsNonModule

package com.company.external.scheduler

import react.Props


external val Scheduler: react.FC<Props>
val MyComponent = VFC {
    Scheduler()
}

答案1

得分: 2

两天内找到了一个可行的解决方案

@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>
英文:

By typing in two days found a working solution

@file:JsModule(&quot;react-mui-scheduler&quot;)
@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&lt;SchedulerEvent&gt;
    var locale: MuiSchedulerLocale?
}

@JsName(&quot;default&quot;)
external val Scheduler: react.FC&lt;SchedulerProps&gt;

huangapple
  • 本文由 发表于 2023年3月7日 18:37:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/75660882.html
  • kotlin
  • kotlin-js
  • kotlin-multiplatform
  • material-ui
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定