如何在ReactJS+TailWind项目中将两个按钮合并为单个动态按钮

合并后的实现代码 #

<div className="mt-8 mb-16">
  <button
    onClick={this.id <= 10 ? handlePurchase : undefined}
    type="button"
    disabled={this.id > 10}
    className={`inline-flex items-center px-16 py-3 border border-transparent text-base font-large elevation-15 rounded-md ${
      this.id <= 10 
        ? "text-white bg-green-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" 
        : "text-gray-500 bg-gray-300 cursor-not-allowed"
    }`}
  >
    {this.id <= 10 ? "Mint me a Marköbot!" : "All Marköbot have been minted!"}
  </button>
</div>

实现说明 #

• 所有可变属性都通过this.id <= 10的判断条件做三元处理，只需渲染单个按钮节点即可实现两种状态的切换
• 修正了原代码中disabled属性的错误写法，React中绑定布尔型属性不需要额外用单引号包裹大括号
• 禁用状态下新增cursor-not-allowed Tailwind类，优化禁用状态下的鼠标交互体验
• 禁用状态下自动移除onClick事件绑定，避免无效逻辑触发

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