KotlinJS React函数式组件中解构Props的实现方法

问题背景 #

在JavaScript中，对象解构是常用操作，示例如下：

const foo = {
    a: 1,
    b: 2,
    c: 3 
};

const {a, b, c } = foo;
console.log(a)

1

在KotlinJS React中尝试类似操作时，编写了以下代码但报错：

interface FooProps : Props {
    var a: Int
    var b: Int
    var c: Int
}

val Foo = FC<FooProps> { props -> 
    val(a, b, c) = props
    // ...
}

Destructuring declaration initializer of type FooProps must have a 'component1()' function

以下是几种可行的解决办法：

解决方案1：为Props接口添加componentN函数 #

Kotlin的解构声明依赖component1()、component2()等运算符函数，直接在Props接口中定义这些函数即可支持解构：

interface FooProps : Props {
    var a: Int
    var b: Int
    var c: Int

    // 定义解构所需的component函数
    operator fun component1() = a
    operator fun component2() = b
    operator fun component3() = c
}

// 之后即可正常解构
val Foo = FC<FooProps> { props -> 
    val(a, b, c) = props
    // ...
}

解决方案2：通过扩展函数转换为可解构类型 #

如果不想修改Props接口，可以定义扩展函数将其转换为Kotlin原生支持解构的类型（如Triple）：

interface FooProps : Props {
    var a: Int
    var b: Int
    var c: Int
}

// 扩展函数：将FooProps转为Triple
fun FooProps.toTriple() = Triple(a, b, c)

// 使用时解构Triple
val Foo = FC<FooProps> { props -> 
    val(a, b, c) = props.toTriple()
    // ...
}

解决方案3：简洁的直接属性解构 #

如果只是想简化代码，也可以直接基于属性值创建可解构的集合：

val Foo = FC<FooProps> { props -> 
    val(a, b, c) = listOf(props.a, props.b, props.c)
    // ...
}

这种写法无需额外定义函数，但会创建临时列表，性能影响可忽略，适合快速实现。

解决方案4：使用data class作为Props #

如果自定义Props结构简单，可以用data class替代接口，Kotlin会自动为data class生成component1()到componentN()函数：

data class FooProps(
    var a: Int = 0,
    var b: Int = 0,
    var c: Int = 0
) : Props

// 直接解构data class实例
val Foo = FC<FooProps> { props -> 
    val(a, b, c) = props
    // ...
}

注意：这种方式适合独立的简单Props，若需要与其他Props接口组合，可能不如接口灵活。

内容的提问来源于stack exchange，提问作者four-eyes