React函数组件中用useState配置按钮样式报错求助

你的问题出在style属性的语法错误：JSX里的style接收的是一个普通JS对象，你给backgroundColor的值多套了一层大括号，导致解析器无法识别。

修正后的按钮代码 #

<button 
  style={{ backgroundColor: loginButtonSetting.buttonColor }} 
  disabled={loginButtonSetting.isButtonActive}
>Button</button>

错误原因拆解 #

原来的写法{ backgroundColor: { loginButtonSetting.buttonColor} }中，loginButtonSetting.buttonColor外面的{}完全多余——这里只需要直接传入颜色字符串值，不需要把它再包装成一个对象。

补充说明 #

另外提个细节：你定义的isButtonActive初始值是true，对应disabled={loginButtonSetting.isButtonActive}会让按钮一开始就是禁用状态。如果你的实际需求是isButtonActive为true时按钮可用，要改成disabled={!loginButtonSetting.isButtonActive}。

关于你尝试的方法 #

• 给loginButtonSetting.buttonColor加括号：加大括号会变成嵌套对象，还是错误；加小括号完全没必要，单个表达式不需要额外包裹。
• 用数组扩展运算符：style是对象类型，数组扩展运算符根本不适用，而且你想取的是对象里的单个属性，直接取值就够了。

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