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

如何解决如何在 React 中定位单个 map() 元素？

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

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

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

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

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

当用户点击一个属性类型时，它有一个与之关联的扇区。 选择后，通过将 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>
    )
}

...产生以下用户界面：

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

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

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

我试过了：

• 在循环中包含菜单代码

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

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

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

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

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

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

解决方法

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

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

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