运行时如何为react-bootstrap的Dropdown组件动态添加下拉选项

问题根因 #

你之前的实现不生效的核心原因是直接拼接了字符串形式的组件代码，React无法将普通字符串识别为可渲染的React Bootstrap组件，因此不会生成对应的下拉选项。

正确实现方案 #

你可以通过React状态管理+数组动态渲染JSX的方式实现需求，完整实现代码如下：

import { useState } from 'react';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';

import SponsorManager from './SponsorManager';
const sponsorManager = new SponsorManager();

function App() {
  // 存储当前选中的赞助商名称，作为下拉按钮标题
  const [selectedSponsor, setSelectedSponsor] = useState('请选择赞助商');
  const sponsorIds = sponsorManager.getSponsors();

  return (
    <React.Fragment>
      <div>
        <DropdownButton id="dropdown-basic-button" title={selectedSponsor}>
          {
            // 遍历数据动态生成下拉选项，无需拼接字符串
            Object.entries(sponsorIds).map(([key, value]) => (
              <Dropdown.Item 
                key={key} 
                href="#/action-1"
                onClick={() => setSelectedSponsor(value.displayName)}
              >
                {value.displayName}
              </Dropdown.Item>
            ))
          }
        </DropdownButton>
      </div>
    </React.Fragment>
  );
}

核心逻辑说明 #

• 使用useState Hook存储当前选中的赞助商名称，下拉按钮的标题会同步响应状态变化，实现选中后展示当前选中项的需求
• 直接通过遍历数据生成JSX元素数组，而非拼接字符串，符合React的组件渲染规则
• 若sponsorManager.getSponsors()返回的是数组类型，可直接调用map方法，无需先通过Object.entries转换

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