如何在 React 中定位单个 map()'d 元素？

Question

TL;DR - 我需要从一组通过 map()'ing 数组创建的菜单中定位并打开一个菜单，而不需要引用。

我的 React.js 代码有一个问题，我无法完全理解，请用另一双眼睛来解决。

此逻辑的基本前提是用户能够选择需要在建筑物的房间内执行的任务。该建筑可以来自多个部门，因此可以有多个不同的房间，每个房间都有自己的任务。简而言之，它需要是动态的。

这是我的数据结构的简化概述：

• 有许多部门
  • 每个 Sector 都有多个 RoomGroups
    • 每个 RoomGroup 都有多个 Rooms
      • 每个房间都有多个任务

当用户点击一个属性类型时，它有一个与之关联的扇区。 选择后，通过将 roomGroup 数组传递给 map() 来呈现 RoomGroup。

这是用于此的代码的基本示例（为了清楚起见，减去 CSS）...

const renderRoomGroups = () => {
    return (
        <div className={'requirementsInfoComponent-addRoom-row-container'}>
            {data_roomGroups.map(roomGroup => {
                return (
                    <div key={roomGroup.id}>

                        <div onClick={() => handleRoomGroupSelection(roomGroup)}>
                            {/* Icon */}
                            <MdAddCircle />

                            {/* Room name */}
                            <p>{roomGroup.group_name}</p>
                        </div>

                        {isRoomGroupMenuVisible &&
                            <div>
                                {renderRoomsMenu()}
                            </div>}

                    </div>
                )
            })}
        </div>
    )
}

const handleRoomGroupSelection = (roomGroup) => {
    setRoomGroupSelection(roomGroup);
    setIsRoomGroupMenuVisible(true);
}

const renderRoomsMenu = () => {

    const roomsByGroup = data_rooms.filter(room => room.room_group_id === roomGroupSelection.id);

    return (
        <ModalContainer>
            {roomsByGroup.map(room => {
                return (
                    <div key={room.id}>
                        <p>{room.room_name}</p>
                    </div>
                )
            })}
        </ModalContainer>
    )
}

...生成以下 UI：

问题是，当用户单击 RoomGroup 时，它应该打开相关 Room 的菜单以便他们能够选择房间，但由于菜单位于地图功能中，它会同时打开所有菜单。我可以将菜单移出地图，但它总是在同一个地方打开，而不是在对用户体验不利的相关部分中打开。

所以，我想要一种方法，只打开与所选 RoomGroup 相关的菜单，在它所属的部分中。

我环顾四周并看到了一些类似的问题，但这些有硬编码的菜单需要动态打开，我可以这样做，但考虑到不同的数据量，这不是一个很好的选择。

我试过了：

• 在循环中包含菜单代码

  • 不好，因为所有菜单都使用同一个命令打开

• 将菜单代码置于循环之外

  • 作为单个菜单运行良好，但始终位于同一位置

• 围绕光标的 X,Y 坐标打开菜单

  • 这有点俗气，因为准确度取决于元素的嵌套，并且与 UI 没有正确对齐

我想过让每个菜单都成为自己的组件，并传递给它自己的 onClick() 函数，但是我该如何定位单个菜单呢？

Answer 1

您只需要显示正确房间的菜单。试试这个：

 {roomGroup.id === roomGroupSelection.id &&
           <div>
               {renderRoomsMenu()}
           </div>
}

只在你需要的地方渲染菜单。你也可以删除isRoomGroupMenuVisible