React中如何根据角色权限批量禁用表单内所有TextField组件

方案1：直接绑定disabled属性（最简改动，适合中小表单） #

你当前重复渲染两次表单的写法完全可以优化，直接把disabled属性的值绑定为权限判断的取反结果即可，只需要维护一套表单结构：

export default function BasicTextFields() {  
  const classes = useStyles();  
  // 无admin权限时isDisabled为true
  const isDisabled = !authService.verifyRole(role.admin)
  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField id="standard-basic" label="Title" disabled={isDisabled} />
      <TextField id="filled-basic" label="Description" disabled={isDisabled} />
      <TextField id="outlined-basic" label="Data" variant="outlined" disabled={isDisabled} />
    </form>
  )
}

方案2：抽离表单配置循环渲染（适合后续会扩展的大表单） #

如果后续表单字段会持续增加，不想每个组件都手动加disabled={isDisabled}，可以把所有表单项的配置抽成数组，统一循环渲染，只需要写一次disabled逻辑：

export default function BasicTextFields() {  
  const classes = useStyles();  
  const isDisabled = !authService.verifyRole(role.admin)
  // 后续新增字段直接往这个数组里加配置即可
  const formItems = [
    { id: "standard-basic", label: "Title" },
    { id: "filled-basic", label: "Description" },
    { id: "outlined-basic", label: "Data", variant: "outlined" }
  ]
  return (
    <form className={classes.root} noValidate autoComplete="off">
      {formItems.map(item => (
        <TextField 
          key={item.id}
          {...item}
          disabled={isDisabled}
        />
      ))}
    </form>
  )
}

方案3：Context全局控制（适合多层嵌套的复杂表单） #

如果你的表单结构复杂，TextField封装在多层子组件内，不想逐层传递isDisabled参数，可以用React Context做全局状态共享，在表单根组件提供权限状态，所有子组件内的表单项直接消费状态控制disabled即可。

注意事项 #

前端的禁用逻辑仅做用户体验优化，后端接口必须同步做权限校验，前端的控制逻辑很容易被用户通过浏览器调试工具篡改，不能作为安全校验的唯一依据。

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