英文:
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("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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论