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

Question

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

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

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

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

有多个扇区
- 每个扇区有多个房间组
  - 每个房间组有多个房间
    - 每个房间有多个任务

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

来呈现 RoomGroups

这是用于此的代码的基本示例（为清楚起见减去 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:

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

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

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

我试过：

菜单代码在循环中
- 不好，因为所有菜单都在同一个命令上打开
菜单代码在循环之外
- 作为单个菜单效果很好，但始终位于相同位置
围绕光标的 X,Y 坐标打开菜单
- 它有点俗气，因为准确性取决于元素的嵌套，并且它与 UI

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

Answer 1

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

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

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

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

How to target a single map()'d element in React?

javascript

reactjs

menu

array.prototype.map