Kotlin/JS React：不能使用自定义反应组件

Question

您好，我正在尝试根据此处的教程添加自定义反应组件：

https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/01_Introduction

我有以下组件，它工作正常：

@file:JsModule("react-youtube-lite")
@file:JsNonModule

package ui.bridges

import react.*

@JsName("ReactYouTubeLite")
external val YoutubePlayer: ComponentClass<ReactYouTubeProps>

external interface ReactYouTubeProps : Props {
    var url: String
}

但是当我尝试像这样为react-qr 添加自定义组件时：

@file:JsModule("react-qr-code")
@file:JsNonModule

import react.*

@JsName("QRCode")
external val QRCode: ComponentClass<QRCodeProps>


external interface QRCodeProps : Props {
    var value: String
}

我收到以下错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ConnectComponent`.
    at ConnectComponent (webpack-internal:///./kotlin/web.js:132824:24)
    at div
    at div
    at div
    at ContentComponent (webpack-internal:///./kotlin/web.js:132449:24)
    at DashboardComponent (webpack-internal:///./kotlin/web.js:133508:24)

react_devtools_backend.js:2540 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ConnectComponent`.
    at createFiberFromTypeAndProps (react-dom.development.js?f6e0:25058)
    at createFiberFromElement (react-dom.development.js?f6e0:25086)
    at createChild (react-dom.development.js?f6e0:13446)
    at reconcileChildrenArray (react-dom.development.js?f6e0:13719)
    at reconcileChildFibers (react-dom.development.js?f6e0:14125)
    at reconcileChildren (react-dom.development.js?f6e0:16997)
    at updateHostComponent (react-dom.development.js?f6e0:17632)
    at beginWork (react-dom.development.js?f6e0:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js?f6e0:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?f6e0:3994)

这就是我添加 youtube 视频和二维码的方式。当我注释掉 qr 部分时，视频效果很好。有些东西告诉我们，组件的构建方式有所不同。但我不确定是什么。我对 React 几乎一无所知，如果这是一个愚蠢的问题，我很抱歉:)

  div {

                child(YoutubePlayer) {
                    attrs {
                        url = "https://www.youtube.com/watch?v=8o312hBgEmM"
                    }
                }
                child(QRCode) {
                    attrs {
                        value = "XYZ"
                    }
                }
            

        }

Answer 1

这就是我最终得到的结果并且它有效：

@file:JsModule("react-qr-code")
@file:JsNonModule

package ui.bridges

import styled.StyledProps

@JsName("default")
external val QRCode: react.FC<QRCodeProps>


external interface QRCodeProps : StyledProps {
    var value: String
}