如何为动态生成的Dropdown菜单添加条件分隔线？

场景1：在"Create New"菜单项后添加分隔线 #

你可以在map函数中返回一个包含<Dropdown.Item>和（符合条件时的）<Dropdown.Divider>的元素数组，每个元素需要分配唯一key来避免React渲染警告：

<Dropdown>
    <Dropdown.Toggle size='sm' variant='outline-primary'>{selectedView}</Dropdown.Toggle>
    <Dropdown.Menu>
        {
            viewList.filter(v => v !== selectedView).map(view => {
                const elements = [<Dropdown.Item value={view} key={`item-${view}`}>{view}</Dropdown.Item>];
                // 匹配到目标菜单项时追加分隔线
                if (view === "Create New") {
                    elements.push(<Dropdown.Divider key={`divider-${view}`} />);
                }
                return elements;
            })
        }
    </Dropdown.Menu>
</Dropdown>

场景2：在第一个菜单项后添加分隔线 #

利用map的第二个参数index判断当前项是否为过滤后的第一个元素，符合条件时追加分隔线：

<Dropdown>
    <Dropdown.Toggle size='sm' variant='outline-primary'>{selectedView}</Dropdown.Toggle>
    <Dropdown.Menu>
        {
            viewList.filter(v => v !== selectedView).map((view, index) => {
                const elements = [<Dropdown.Item value={view} key={`item-${view}`}>{view}</Dropdown.Item>];
                // 第一个菜单项后插入分隔线
                if (index === 0) {
                    elements.push(<Dropdown.Divider key='divider-first' />);
                }
                return elements;
            })
        }
    </Dropdown.Menu>
</Dropdown>

关键说明 #

• React允许map返回元素数组，不需要局限于单个元素返回，只要每个元素有唯一key即可
• 也可以用React.Fragment包裹元素（如<React.Fragment key={view}>），避免生成额外DOM节点，效果和数组一致
• 务必保证key的唯一性，防止重复渲染或警告问题

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