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

Question

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

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

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

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

• 有多个部门
  • 每个Sector有多个RoomGroup
    • 每个RoomGroup有多个房间
      • 每个房间有多个任务

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

这是用于此的代码的基本示例（为了清楚起见，减去 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() 函数，但是我将如何定位单个菜单呢？

标签： javascriptreactjsmenuarray.prototype.map

Answer 1

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

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

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