React JS中如何将单按钮内的多选项拆分为独立按钮

要把单个按钮里的选项拆成独立按钮，直接循环渲染每个Button组件即可（按钮内部嵌套option是下拉选择框的用法，不适合按钮场景）。修改后的代码如下：

function Filters({ filter, setFilter, locations }) { // 修正props名：从location改为locations，和内部循环变量匹配
  return (
    <div className="bg-transparent outline-none text-sm text-gray-600 placeholder-grey-400">
      <div className="pl-2 pr-2 gap-3 flex"> {/* 添加flex布局，让按钮横向排列 */}
        {/* 循环渲染每个地点对应的独立按钮 */}
        {locations.map((item, index) => (
          <Button
            key={index}
            colorScheme="teal"
            size="xs"
            onClick={() => {
              setFilter({
                ...filter,
                search: item.location, // 直接使用当前项的地点值，无需依赖DOM取值
              });
            }}
          >
            {item.location}
          </Button>
        ))}
        {/* ALL按钮，点击后重置搜索条件（可根据业务需求调整赋值） */}
        <Button
          colorScheme="teal"
          size="xs"
          onClick={() => {
            setFilter({
              ...filter,
              search: "", // 也可设置为"ALL"，根据你的筛选逻辑选择
            });
          }}
        >
          ALL
        </Button>
      </div>
    </div>
  );
}
export default Filters;

关键修改说明： #

• 移除按钮内部的<text>和<option>标签，直接将地点名称作为按钮显示文本。
• 将「单个按钮内循环选项」改成「循环渲染多个独立按钮」，每个按钮对应一个地点选项。
• 点击事件不再依赖e.target.value，直接使用循环项的item.location，避免DOM取值可能出现的异常。
• 修正props参数名，确保和内部循环的变量名一致，避免报错。
• 给按钮容器添加flex类，让按钮横向排列，符合筛选按钮的常见布局。

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