React组件使用defaultProps设置color属性不生效，应如何修改代码？

核心错误点 #

你在给button的style属性传值时，对color变量多嵌套了一层大括号，导致color最终被识别为对象而非字符串，样式无法生效。

原错误代码：

<button style={{color: {color}}}>{title}</button>

这里内层的{color}相当于{color: color}，最终生成{color: {color: "green"}}的结构，而React的style属性要求样式值为字符串/数字类型，无法识别对象格式的取值，所以样式不生效。

修复代码 #

直接去掉color外面多余的大括号即可，两种写法都可以：

写法1：属性简写（推荐） #

<button style={{color}}>{title}</button>

写法2：完整键值对写法 #

<button style={{color: color}}>{title}</button>

其他可优化点 #

• defaultProps里定义的backgroundColor存在拼写错误，orage应为orange，同时你没有在组件参数里解构该属性、也没有在style中引用，如果要让背景色生效需要补充对应逻辑：
  第一步修改组件参数定义：

  function Button({title,color,backgroundColor}) {
  

  第二步给style补充背景色配置：

  <button style={{color, backgroundColor}}>{title}</button>
  

• 如果后续取消propTypes的注释，注意标记了isRequired的属性不会触发defaultProps逻辑，要是需要保留默认值要去掉对应属性的isRequired标记。

内容的提问来源于stack exchange，提问作者Hilmi Sarıoğlu