将 websocket ref 传递给子组件

Question

我已经在父组件中建立了一个 websocket 连接，并使用 useRef 将其存储在变量 socket 中。现在，我将这个socket 传递给道具中的子组件。我想在子组件中使用这个套接字来发出组件特定的事件，并根据一些 websocket 事件更新特定于组件的某些状态变量。

父组件：

function Parent(props) {
  const userId = props.userId;
  const socket = useRef(null);

  useEffect(() => {
    if (userId) {
      socket.current = services.establishSocketConnect(userId);
    }
    return () => {
      socket.current.close();
    };
  }, []);

  return (
    <React.Fragment>
      <Child socket={socket} />
    </React.Fragment>
  );
}

const mapStateToProps = (state) => ({
  userId:
    (state.userInfo && state.userInfo.user && state.userInfo.user._id) || null,
});

export default connect(mapStateToProps, null)(Parent);

子组件：

function Child(props) {
  const { socket } = props;

  useEffect(() => {
    console.log('Child => socket', socket);
    if (socket.current) {
      console.log('attaching socket events');
    }
  }, []);

  return <h1>Child</h1>;
}

const mapStateToProps = (state, otherProps) => {
  return {
    // ...
    ...otherProps,
  };
};

export default connect(mapStateToProps, null)(Child);

在子组件中，socket.current 没有 websocket 连接。我知道在初始渲染时，该值将为空。所以，这就是 Child 组件最初收到的内容。因此，我尝试将socket、socket.current 添加到useEffect，以便子组件在更改时重新渲染。但是，这不会发生，因为可变对象不能用作 useEffect 的依赖项，我猜..

请提出解决此问题的方法。

---

使用 Robin Zigmond's solution 和一些额外的日志记录。

家长

function Parent(props) {
  const userId = props.userId;
  const socket = useRef(null);

  useEffect(() => {
    console.log('Parent => (initial) socket', socket);

    socket.current = services.establishSocketConnection(userId);

    if (socket.current) {
      socket.current.onopen = onWSOpenEvent();
    }

    let i = setInterval(() => console.log('Parent => (interval) socket', socket), 5000);

    return () => {
      clearInterval(i);
    };
  }, [userId]);

  return (
    <React.Fragment>
      <Child socket={socket.current} />
    </React.Fragment>
  );
}

儿童

function Child(props) {
  const { socket } = props;

  useEffect(() => {
    console.log('Child => (initial) socket', socket);
    if (socket) {
      console.log('attaching socket events');
    }

    let i = setInterval(() => console.log('Child => (interval) socket', socket), 5000);

    return () => {
      clearInterval(i);
    };
  }, [socket]);

  return <h1>Child</h1>;
}

这不起作用。以下是日志：

Answer 1

问题是您将 socket 作为 prop 传递给子组件 - 按照设计，它是一个可变对象，其 current 属性发生更改，同时保持整个对象的相同引用。但是当你将整个对象传递给子组件时，这与 React 道具并不能很好地配合——因为当 current 属性发生变化时，React 不会“看到”这种变化（道具仍然和以前一样before - 对同一对象的引用），因此它不会重新渲染子对象。

解决方案非常简单——不要将可变对象作为道具传递，而只是传递您关心的current 属性：

<Child socket={socket.current} />

现在，当您在 Child 组件中引用 socket 属性时，它应该具有实际的 websocket 连接。

编辑：如果要在子组件中记录当前套接字值，每次更改时，子组件中的useEffect 应该是

useEffect(() => {
    console.log('Child => socket', socket);
    if (socket) {
      console.log('attaching socket events');
    }
}, [socket]);