面试题：Kotlin/JS与React集成时，Kotlin代码如何向React组件传递数据

在Kotlin/JS端传递数据：

首先，将 User 实例转换为可在JavaScript中使用的对象格式。Kotlin/JS可以通过 kotlinx - serialization 库来处理JSON序列化和反序列化。
假设你使用 kotlinx - serialization - json 库，先添加依赖：

implementation "org.jetbrains.kotlinx:kotlinx - serialization - json:1.4.1"

然后，定义扩展函数将 User 实例转换为JSON字符串：

import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json
data class User(val name: String, val age: Int)
fun User.toJson(): String {
    return Json.encodeToString(this)
}

在需要传递数据的地方，将 User 实例转换为JSON字符串并传递给React组件。例如，如果你使用 @JsExport 注解将Kotlin函数暴露给JavaScript，可以这样做：

import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json
import kotlin.js.JsExport
data class User(val name: String, val age: Int)
fun User.toJson(): String {
    return Json.encodeToString(this)
}
@JsExport
fun sendUserData(): String {
    val user = User("John", 30)
    return user.toJson()
}

在React组件中接收和展示数据：

在React组件中，通过props接收从Kotlin/JS传递过来的JSON字符串数据。
使用 JSON.parse 将JSON字符串解析为JavaScript对象。
以下是一个简单的React函数组件示例：

import React from'react';
const UserComponent = ({ userJson }) => {
    const user = JSON.parse(userJson);
    return (
        <div>
            <p>Name: {user.name}</p>
            <p>Age: {user.age}</p>
        </div>
    );
};
export default UserComponent;

在使用这个组件的地方，将Kotlin/JS传递过来的数据作为props传入：

import React from'react';
import UserComponent from './UserComponent';
import { sendUserData } from './kotlinModule';//假设Kotlin代码暴露为kotlinModule
const App = () => {
    const userJson = sendUserData();
    return (
        <div>
            <UserComponent userJson={userJson} />
        </div>
    );
};
export default App;

星途面试题库

面试题：Kotlin/JS与React集成时，Kotlin代码如何向React组件传递数据

知识考点

面试题答案