小编Pho*_*355的帖子

我正在尝试使用 Node 和 Socket.IO 制作一个 ReactJS 实时应用程序，但是我很难找出在客户端处理我的套接字连接的最佳方法。

我有多个 React 组件，它们都需要来自服务器的一些信息，最好通过套接字连接实时获取。但是，在导入socket.io-client依赖项并在不同文件中建立与服务器的连接时，我获得了与服务器的多个连接，这似乎并不是最佳选择。

所以我想知道是否有更好的解决方案来共享多个组件之间的连接，而不必为每个组件创建一个新的连接。也许通过在主app.js文件中建立连接，然后将其传递给子组件以供以后使用。

网上有些地方建议使用context属性来传递套接字变量，但 React 自己的文档强烈反对使用 context。

下面的代码只是一个例子，不是实际的代码，因为实际项目中不必要的代码比说明问题所需的要多得多。

foo.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Foo extends React.Component {
    // ...
    componentDidMount() {
        socket.on("GetFooData", (data) => {
            this.setState({
                fooData: data
            });
        });
    }
    // ...
}

bar.js

import React from 'react';
import io from 'socket.io-client';

const socket = io("http://localhost:3000");

class Bar extends React.Component {
    // ...
    componentDidMount() …

我想从 JSON 中获取对象字段的值。我有一个动态变量let check_permission_key = 'ratingscalename';和一个 JSON

let overwrite_key = {
  studentimage: 'student',
  ratingscalename: 'rating-scale-name',
  ratingscale: 'rating-scale-name',
  capturesettingset: 'capture-setting-set',
  capturesetting: 'capture-setting-set',
  eventlog: 'event-log',
  goalcategorie: 'goal-category',
  userimage: 'user',
  datasheetlink: 'datasheet',
  datasheetgoal: 'datasheet',
};

let get_value = overwrite_key.check_permission_key;

所以我正在像这样获取数据，但它不起作用，有人可以帮我解决这个问题吗？