Question

我正在使用React Scroll滚动到我的应用程序中的各个组件。我正在为动画使用“ gsap”，并且想知道每次滚动到该组件时是否有可能刷新页面（针对所需组件）。目的是每次我进入组件页面时初始化我的“ gsap”动画。

我正在使用React钩子，到目前为止，我都没有喜悦地尝试过useEffect和window.location.reload（）；

Answer 1

您可以使用react-waypoint在特定滚动位置触发事件。该事件在用户滚动或自动滚动时触发。您只需要将Waypoint组件放置到页面中的特定位置，就可以在该组件可见时触发事件。例如：

// get all client in a room
socketServer.in(room_id).clients((err, clients) => {
    for (let i = 0, e = clients.length; i < e; i++) {
        const client = clients[i];
        console.log(client); // print the socket id

        // HOW RETRIVE THE SOCKET OBJECT???
    }
});

// set root namespace
const rootNamespace = socketServer.of('/');

// define customHook
rootNamespace.adapter.customHook = (request, cb) => {
    // every socket.io server execute below, when customRequest requested
    const type = request.type;
    if(type === 'getHandShakeSession'){
        // get all socket objects on local socket.io server
        const sockets = rootNamespace.connected;
        const socketIDs = Object.keys(sockets);
        // get all socket.handshak.session array on local socket.io server
        const sessions = socketIDs.map(socketID => sockets[socketID].handshake.session);
        cb(sessions)
    }
    cb()
}

// request customRequest
rootNamespace.adapter.customRequest({type:'getHandShakeSession'},(err,replies) => {
    //replies are array which element was pushed by cb(element) on individual socket.io server
    //remove empty reply 
    const filtered = replies.filter(reply => reply !== undefined)
    // filtered seems like [[session1,session2,...],[sesssion3,session4,...],..]
    console.log(filtered)
} )

它能解决您的问题吗？

如何使用React Scroll for React JS确保页面在屏幕上刷新

1 个答案: