React-Bootstrap如何实现下拉菜单与触发按钮动态等宽

不需要手动通过ref获取Dropdown组件宽度做动态绑定，React-Bootstrap的Dropdown基于Popper.js实现，有原生配置支持等宽效果，手动监听resize计算宽度属于冗余实现。
你之前使用align="end"仅能实现右对齐，无法让菜单宽度匹配触发器，原因是该属性只控制定位偏移逻辑，不处理尺寸继承规则。

可直接复用的实现方案 #

方案1：组件配置实现（无额外强制CSS） #

直接给Dropdown.Menu传入Popper配置，禁用默认的自动尺寸调整，强制菜单宽度和触发按钮实际渲染宽度完全一致即可，自动响应容器宽度变化，不需要额外监听尺寸变化事件。
修正后的完整代码：

import React from 'react';
import { Dropdown } from 'react-bootstrap';

class SelectComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 1,
    };
  }

  render() {
    const optionTextMap = {
      '1': 'Eins worked',
      '2': 'Zwei worked',
      '3': 'Drei worked',
    }
    return (
      <div>
        <Dropdown className="w-100">
          <Dropdown.Toggle 
            variant="outline-success" 
            id="dropdown-basic"
            className="w-100 text-start"
          >
            Exposure Type: {optionTextMap[this.state.id] || '请选择'}
          </Dropdown.Toggle>
          <Dropdown.Menu 
            popperConfig={{
              modifiers: [
                {
                  name: 'matchWidth',
                  enabled: true,
                  phase: 'beforeWrite',
                  requires: ['computeStyles'],
                  fn: ({ state }) => {
                    state.styles.popper.width = `${state.rects.reference.width}px`;
                  },
                },
                {
                  name: 'preventOverflow',
                  options: { altAxis: false }
                }
              ]
            }}
          >
            {Array.from({ length: 20 }, (_, idx) => idx + 1).map(num => (
              <Dropdown.Item
                key={num}
                onClick={() => this.setState({ id: num })}
              >
                {num}
              </Dropdown.Item>
            ))}
          </Dropdown.Menu>
        </Dropdown>
      </div>
    )
  }
}

export default SelectComp;

上述配置会在下拉菜单每次打开时直接读取触发按钮的实际渲染宽度，给下拉菜单设置完全相同的宽度值，即使触发按钮宽度随页面布局、窗口尺寸动态变化，下拉菜单也会自动同步最新宽度。

方案2：纯CSS实现（零JS逻辑修改） #

如果不想修改组件配置，直接添加如下全局CSS即可实现同等效果：

/* 统一Dropdown容器、触发按钮、下拉菜单的宽度规则 */
.dropdown,
.dropdown .dropdown-toggle,
.dropdown .dropdown-menu {
  width: 100%;
}
/* 覆盖Popper默认生成的定位内联样式，强制菜单和触发器左右边缘对齐 */
.dropdown .dropdown-menu {
  inset: 100% 0 auto 0 !important;
  transform: none !important;
}

原代码存在的问题 #

• align="end"属性使用错误：该属性仅控制下拉菜单的对齐方向，会触发Popper的自动偏移计算，导致菜单无法撑满到和触发器同宽。
• 缺少宽度继承逻辑：默认Dropdown为行内块级元素，宽度随内容收缩，未设置撑满规则的前提下，菜单无法匹配动态变化的容器宽度。
• 选项渲染逻辑冗余：重复编写20个结构完全一致的Dropdown.Item，可通过数组遍历简化，降低后续维护成本。

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