React中Avatar悬浮时仅渲染对应Player组件的问题排查

问题现象 #

• 悬浮第一个Avatar组件时，两个Player组件同时弹出
• 悬浮第二个Avatar组件时，无任何响应

需求：悬浮某个Avatar时，仅显示其对应的Player组件。

问题原因 #

原代码仅使用了一组useHover钩子返回的hovered状态和ref：

• 只有第一个div绑定了ref，导致只有第一个Avatar能触发hover状态变化
• 两个Avatar的显示逻辑共用同一个hovered状态，所以第一个Avatar触发hover时，两个Player都会被渲染

修复方案 #

为每个Avatar单独创建useHover实例，让每个Avatar拥有独立的hover状态和引用，保证悬浮事件互不干扰。

修复后的代码 #

function Profiles() {
    // 为第一个Avatar创建独立的hover状态和引用
    const { hovered: isHoveredOne, ref: refOne } = useHover();
    // 为第二个Avatar创建独立的hover状态和引用
    const { hovered: isHoveredTwo, ref: refTwo } = useHover();

    return (
        <Container style={{ display: "flex" }}>
            <div ref={refOne}>
                {isHoveredOne ? (
                    <PlayerOne />
                ) : (
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={tobias}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                )}
            </div>

            <div ref={refTwo}>
                {isHoveredTwo ? (
                    <PlayerTwo />
                ) : (
                    <Avatar
                        radius="xl"
                        size="xl"
                        src={vij}
                        style={{ border: "black solid .1rem" }}
                        sx={(theme) => ({
                            backgroundColor: theme.colors.yellow[1],
                            "&:hover": {
                                backgroundColor: theme.colors.yellow[3],
                            },
                        })}
                    />
                )}
            </div>
        </Container>
    );
}

export default Profiles;

说明 #

每个Avatar对应一组独立的hovered状态和ref，悬浮事件仅会触发当前Avatar的状态变化，显示逻辑也仅依赖自身的hover状态，完美实现了"悬浮哪个Avatar就显示对应Player"的需求。

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