通过React Component发送数据属性并在jQuery中读取它们

Question

我正在使用React Components和A-Frame来构建虚拟世界。 我正在尝试使用data-*属性将NodeJS中在React中具有的对象设置到Html元素上。当我尝试使用jQuery解析元素时，该属性返回"[object Object]"而不是正确的数据。

我尝试用两种不同的方法解析此数据。我尝试了AFRAME.getAttribute()方法和jQuery Selector方法来查找元素并获取.data('key')值。

这两种方法都找到了我想要的元素，但是它们都在读取"[object Object]"之后都难以读取Object值。

App.js（nodeJS + React）

render() {
    return (
        <a-gltf-model 
            mmsi={this.props.data.MMSI}
            data-ship={this.props.data}
            ship-events
            scale="0.00002 0.00002 0.00002"
            src="boat.glb"/>
            )
        }

Click.js公开文件（js / jQuery）

AFRAME.registerComponent('ship-events', {
    init: function () {
        const el = this.el;
        el.addEventListener('click', function () {
            let mmsi = el.getAttribute('MMSI');
            let objectData = $("a-gltf-model[mmsi='" + mmsi +"']").data('ship').key;
            //let test2 = el.getAttribute('data-ship');
            $('#shipContent').html(objectData);
            console.log(test2);
        });
    }
});

当尝试在控制台中手动创建查询并尝试使用JSON.stringify进行解析时，这似乎并没有将Object分解为JSON。