React自定义Button组件disabled属性变更不生效问题

是属性名拼写错误导致的状态传递失效，和React响应式更新逻辑无关：

• 你封装的Button组件内部，从options中解构的禁用状态字段为isDisabled（正确拼写：disabled前缀带s）
• 但在注册页面调用组件传参时，你把字段名错写成了isDiabled（漏写了s，拼写错误）

这种情况下组件内拿到的isDisabled值永远是undefined，等价于给原生button标签传入disabled={false}，按钮始终保持可用状态，无论表单校验状态怎么变化，组件都收不到正确的禁用标识，自然不会同步更新状态。你直接用原生button时没有拼写错误，所以功能正常。

直接修正调用组件时的属性名拼写即可：

<Button
  options={{
    type: 'submit',
    label: 'sign up',
    // 修正拼写错误
    isDisabled: !isFormValid,
  }}
/>

把所有配置项包裹在单个options对象中传递的写法，很容易出现这类隐蔽的拼写错误，也不利于React做props变更的浅比较优化，建议调整Button组件的props设计，将属性直接平铺传递：

优化后的Button组件代码 #

import React from 'react';
import PropTypes from 'prop-types';

// 直接平铺接收props，不需要嵌套options对象
const Button = ({ className, labelClass, type, label, onClick, isDisabled }) => {
  return (
    <button
      type={type}
      className={className}
      onClick={onClick}
      disabled={isDisabled}
    >
      <span className={labelClass}>{label}</span>
    </button>
  );
};

Button.propTypes = {
  className: PropTypes.string,
  labelClass: PropTypes.string,
  type: PropTypes.string,
  onClick: PropTypes.func,
  isDisabled: PropTypes.bool,
};

export default Button;

优化后的组件调用方式 #

<Button
  type="submit"
  label="sign up"
  isDisabled={!isFormValid}
/>

调整后如果再出现属性名拼写错误，React会在控制台直接抛出PropTypes校验警告，能快速定位问题，代码可读性也更高。

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