如何基于条件为React Button组件设置data-bs-dismiss属性？

你原来的写法用数组展开是错误的，React组件属性需以对象键值对的方式处理，给你两种可行的实现方式：

• 方法一：对象展开运算符
  借助对象展开逻辑，当btnLoading为false时，展开包含目标属性的对象；当btnLoading为true时展开空对象，相当于不设置该属性：

  <Button
    {...(!btnLoading && { 'data-bs-dismiss': 'modal' })}
    // 其他按钮属性，比如 disabled={btnLoading}
  >
    {btnLoading ? '加载中...' : '关闭弹窗'}
  </Button>
  

• 方法二：直接赋值undefined/null
  React会自动忽略值为undefined或null的属性，因此可以直接对属性做条件赋值：

  <Button
    data-bs-dismiss={btnLoading ? undefined : 'modal'}
    // 其他按钮属性
  >
    {btnLoading ? '加载中...' : '关闭弹窗'}
  </Button>
  

你原写法失效的原因：你用了数组[data-bs-dismiss='modal']，但React组件属性要求是键值对对象，数组展开在这里完全不适用，且这种数组写法本身语法也不合法。

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