React项目导入web组件vue-advanced-chat时如何传递数组对象参数

问题原因 #

React默认会将JSX中给自定义Web组件传递的非字符串/数字类型属性序列化为字符串，你直接写rooms={room}会被转为"[object Object]"这类无效值，vue-advanced-chat组件无法识别。

解决方法 #

通过ref获取web组件的真实DOM实例，直接给实例赋值属性，全React版本兼容，代码修正如下：

import React, { useRef, useEffect } from "react";
import "../../../node_modules/vue-advanced-chat/dist/vue-advanced-chat.js";

// React组件首字母需要大写，否则会被识别为原生标签
function Test() {
    // 绑定web组件的ref
    const chatRef = useRef(null);
    const rooms = [
        {
            roomId: 1,
            roomName: "Room 1",
        }
    ];
    const messages = [];

    useEffect(() => {
        if (chatRef.current) {
            // 直接给DOM实例赋值属性，不走React的序列化逻辑
            chatRef.current.currentUserId = "12";
            chatRef.current.rooms = rooms;
            chatRef.current.messages = messages;
            // 其他非字符串类型参数都可以用这种方式赋值
        }
    // 依赖项添加需要同步的变量，数据变更后会自动更新
    }, [rooms, messages])

    return (
        <div>
            <vue-advanced-chat ref={chatRef}></vue-advanced-chat>
        </div>
    );
}
export default Test;

补充说明 #

• 如果你的rooms、messages等数据会动态更新，只要把变量加到useEffect的依赖数组中即可实现自动同步
• React 18及以上版本也支持直接给自定义Web组件传递对象/数组类型属性，但兼容性不如ref赋值方案，更推荐用上述写法

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