React中Material UI ButtonGroup循环渲染时禁用指定按钮的实现方法

Material UI 的 <Button> 组件原生支持 disabled 布尔属性，你只需要在循环渲染时给该属性绑定对应判断逻辑即可，两种常用实现方案如下：

方案1：直接绑定判断逻辑（适合固定禁用规则的场景） #

直接在 disabled 属性中判断当前遍历项是否为 Session 对应的选项，非 Session 项全部设为禁用即可，注意 React 循环渲染需要给子元素加唯一 key 属性避免报错：

{projectTypeValues.map(element =>
  <Button 
    key={element.value}
    variant="contained" 
    color="primary"
    disabled={element.value !== 'session'}
  >
    {element.name}
  </Button>
)}

上述代码逻辑为：当元素的value不等于session时，按钮禁用，刚好符合你仅Session按钮可用的需求。

方案2：数组字段控制（适合后续可能调整禁用规则的场景） #

你可以先给原数组的每一项添加disabled字段提前配置禁用状态，渲染时直接读取该字段即可，后续调整禁用规则只需要修改数组配置，不用改动渲染逻辑：

// 先给数组添加disabled字段
const projectTypeValues = [
  { name: 'Hour', value: 'hour', disabled: true },
  { name: 'Day', value: 'day', disabled: true },
  { name: 'Session', value: 'session', disabled: false },
  { name: 'project', value: 'project', disabled: true }
]

// 渲染逻辑
{projectTypeValues.map(element =>
  <Button 
    key={element.value}
    variant="contained" 
    color="primary"
    disabled={element.disabled}
  >
    {element.name}
  </Button>
)}

两种方案都可以保证4个按钮全部正常展示，仅Session对应的按钮可交互，其余3个按钮为禁用状态。

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