新版kotlin-react中能否创建类同RComponent的类式React组件？

新版kotlin-react（pre.282之后版本）移除了kotlin-react-legacy中的RComponentAPI，但可以通过kotlin-react-core提供的基础Component类来实现完全等效的类式组件，具体实现方式如下：

• 直接继承kotlin-react-core的Component<P, S>泛型类，其中P为组件props类型，S为组件state类型
• 借助buildElement函数在ChildrenBuilder上下文编写渲染逻辑，替代旧版RBuilder的DSL能力

示例代码 #

import react.Component
import react.Props
import react.ReactNode
import react.buildElement
import react.dom.html.ReactHTML.div
import react.dom.html.ReactHTML.h1
import react.dom.html.ReactHTML.button

// 定义组件Props
external interface MyCustomProps : Props {
    var headerText: String
}

// 定义组件State（按需使用）
data class MyCustomState(var clickCount: Int)

// 实现类式组件
class MyCustomComponent : Component<MyCustomProps, MyCustomState>() {
    // 初始化State
    override fun MyCustomState.init() {
        clickCount = 0
    }

    // 实现渲染逻辑
    override fun render(): ReactNode {
        return buildElement {
            div {
                h1 {
                    +"${props.headerText} 点击次数: ${state.clickCount}"
                }
                button {
                    +"点击计数"
                    onClick {
                        setState { clickCount += 1 }
                    }
                }
            }
        }
    }
}

// 扩展ChildrenBuilder，让组件可在DSL中调用
fun ChildrenBuilder.myCustomComponent(headerText: String) {
    child(MyCustomComponent::class) {
        attrs.headerText = headerText
    }
}

关键说明 #

• 该实现完全等效于旧版RComponent的能力，支持props传递、state管理、生命周期函数（如componentDidMount等）
• buildElement函数是连接Component的render方法与新版ChildrenBuilder DSL的核心，确保你能沿用熟悉的声明式写法
• 官方当前更推荐函数式组件+Hooks的开发模式，但如果业务需要类式组件，该方案是稳定可行的替代方案

内容的提问来源于stack exchange，提问作者AlexO