[英]How to import react-bootstrap component with children into kotlin-js react app
我想在使用 kotlin-js 創建的反應網站中使用引導卡組件。 該應用程序使用 kotlin-react 包裝器和 react-bootstrap 庫。
react-bootstrap 文檔說使用 <Card.Body> 來放置內容。
<Card>
<Card.Body>This is some text within a card body.</Card.Body>
</Card>
到目前為止,我設法將 Card JavaScript 模塊導入 kotlin-js。
@file:JsModule("react-bootstrap/Card")
import react.RClass
import react.RProps
@JsName("default")
external val Card: RClass<RProps>
有了這個,我可以在 RComponent 中使用 Card。
class Content : RComponent<RProps, RState>() {
override fun RBuilder.render() {
Card {
+"Hello World"
}
}
}
導致:
<div class="card">
Hello World
</div>
我還需要 CardBody 組件。
像這樣的東西:
class Content : RComponent<RProps, RState>() {
override fun RBuilder.render() {
Card {
CardBody {
+ "Hello World"
}
}
}
}
但是 CardBody 不是一個單獨的 react-bootstrap 組件,可以像 Card 組件一樣導入。 它是 Card 組件內部的一個值。
typescript 定義文件Card.d.ts如下所示:
import CardImg from './CardImg';
import { BsPrefixPropsWithChildren, BsPrefixRefForwardingComponent } from './helpers';
import { Color, Variant } from './types';
declare const CardBody: BsPrefixRefForwardingComponent<any, {}>;
declare const CardTitle: BsPrefixRefForwardingComponent<any, {}>;
declare const CardSubtitle: BsPrefixRefForwardingComponent<any, {}>;
declare const CardLink: BsPrefixRefForwardingComponent<any, {}>;
declare const CardText: BsPrefixRefForwardingComponent<any, {}>;
declare const CardHeader: BsPrefixRefForwardingComponent<any, {}>;
declare const CardFooter: BsPrefixRefForwardingComponent<any, {}>;
declare const CardImgOverlay: BsPrefixRefForwardingComponent<any, {}>;
export interface CardProps extends BsPrefixPropsWithChildren {
bg?: Variant;
text?: Color;
border?: Variant;
body?: boolean;
}
declare type Card = BsPrefixRefForwardingComponent<'div', CardProps> & {
Img: typeof CardImg;
Title: typeof CardTitle;
Subtitle: typeof CardSubtitle;
Body: typeof CardBody;
Link: typeof CardLink;
Text: typeof CardText;
Header: typeof CardHeader;
Footer: typeof CardFooter;
ImgOverlay: typeof CardImgOverlay;
};
declare const Card: Card;
export default Card;
如果我使用dukat將 TypeScript 定義文件轉換為 Kotlin 聲明。 它輸出一個Card.module_react-bootstrap.kt文件
@file:JsModule("react-bootstrap")
@file:JsNonModule
@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS")
import kotlin.js.*
import kotlin.js.Json
import org.khronos.webgl.*
import org.w3c.dom.*
import org.w3c.dom.events.*
import org.w3c.dom.parsing.*
import org.w3c.dom.svg.*
import org.w3c.dom.url.*
import org.w3c.fetch.*
import org.w3c.files.*
import org.w3c.notifications.*
import org.w3c.performance.*
import org.w3c.workers.*
import org.w3c.xhr.*
external var CardBody: BsPrefixRefForwardingComponent<Any, Any>
external var CardTitle: BsPrefixRefForwardingComponent<Any, Any>
external var CardSubtitle: BsPrefixRefForwardingComponent<Any, Any>
external var CardLink: BsPrefixRefForwardingComponent<Any, Any>
external var CardText: BsPrefixRefForwardingComponent<Any, Any>
external var CardHeader: BsPrefixRefForwardingComponent<Any, Any>
external var CardFooter: BsPrefixRefForwardingComponent<Any, Any>
external var CardImgOverlay: BsPrefixRefForwardingComponent<Any, Any>
external interface CardProps : BsPrefixPropsWithChildren {
var bg: dynamic /* String | String | String | String | String | String | String | String | String? */
get() = definedExternally
set(value) = definedExternally
var text: String? /* 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' */
get() = definedExternally
set(value) = definedExternally
var border: dynamic /* String | String | String | String | String | String | String | String | String? */
get() = definedExternally
set(value) = definedExternally
var body: Boolean?
get() = definedExternally
set(value) = definedExternally
}
external interface `T$0` {
var Img: Any
var Title: Any
var Subtitle: Any
var Body: Any
var Link: Any
var Text: Any
var Header: Any
var Footer: Any
var ImgOverlay: Any
}
@JsName("default")
external var Card: BsPrefixRefForwardingComponent<String /* 'div' */, CardProps> /* BsPrefixRefForwardingComponent<String /* 'div' */, CardProps> & `T$0` */
但這不會編譯。
閱讀 Typescript 聲明,似乎
文件:Card.kt
@file:JsModule("react-bootstrap/Card")
package bootstrap
import react.RClass
import react.RProps
@JsName("default")
external val Card: RClass<RProps>
文件:Card.ktx.kt(因為在 JsModule 中不能有非外部聲明)
package bootstrap
import react.RClass
import react.RProps
val CardBody : RClass<RProps> = Card.asDynamic().Body
val CardLink : RClass<RProps> = Card.asDynamic().Link
用法
fun RBuilder.MyComp(){
Card {
CardBody {+"Card body goes here" }
}
}
應該管用。
如果您想將 css 用於外部元素,您可以這樣做,
首先你需要讓你的元素道具實現 WithClassName 接口:
@file:JsModule("react-bootstrap")
@file:JsNonModule
import react.RProps
import react.RClass
import react.dom.WithClassName
@JsName("Card")
external val bsCard : RClass<bsCardProps>
external interface bsCardProps: WithClassName
然后在 another.kt 文件中使用樣式 function ,如下所示:
import styled.styled
val styledBsCard = styled(bsCard)
現在使用 styledBsCard 之類的樣式元素:
override fun RBuilder.render() {
styledBsCard {
css {
width = 200.px
backgroundColor = Color.blue
marginLeft = 100.px
}
//something other elements
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.