在JavaScript中使用多重三元运算符：为特定条件分支设置独立onClick事件的最优方案

Got it, let's refactor this ternary structure to cleanly separate the isEnableWaitlist condition and give it its own onClick handler. The goal is to keep the logic readable while meeting your requirement—here's the optimized approach:

{ 
  this.props.program.application_required || this.state.isEnableWaitlist || this.props.program.manual_invoices || this.isFree() ? (
    <>
      { /* First check if waitlist is enabled - this gets its own onClick */ }
      { this.state.isEnableWaitlist ? (
        <button 
          type="button" 
          onClick={_ => this.handleWaitlistClick()} {/* Replace with your actual waitlist handler */}
          style={{ padding: "10px", display: "block", marginLeft: "auto", marginBottom: 0 }}
        >
          Submit Application
        </button>
      ) : this.props.program.application_required || this.isFree() ? (
        {/* Original button logic for application required or free programs */}
        <button 
          type="button" 
          onClick={_ => this.manualPayment()}
          style={{ padding: "10px", display: "block", marginLeft: "auto", marginBottom: 0 }}
        >
          { this.props.program.application_required ? "Submit Application" : "Confirm Order" }
        </button>
      ) : (
        {/* Manual invoice branch - kept exactly as original */}
        <>
          <p style={{ padding: "20px", fontFamily: "Open Sans, sans-serif" }}>
            <b>{ this.props.organization }</b> opted to collect payments manually. After confirming your order{" "}
            <b>{ this.props.organization }</b> will contact you to discuss next steps & payment options.
          </p>
          <button 
            type="button" 
            onClick={_ => this.manualPayment()}
            style={{ padding: "10px", display: "block", marginLeft: "auto", marginBottom: 0 }}
          >
            Confirm Order
          </button>
        </>
      )}
    </>
  ) : null {/* Render nothing if none of the top-level conditions are met */}
}

Why this is the optimal approach: #

• Explicit condition priority: We surface the waitlist check first, making it immediately clear this branch has unique behavior (the custom onClick) without burying it in a combined condition.
• Minimal redundancy: All existing logic for application-required programs, free programs, and manual invoices stays intact—we only modify the specific branch we need to.
• Readable nesting: The ternary levels are shallow enough to follow at a glance, with comments to call out each branch's purpose.
• Maintains original functionality: No unintended changes to other parts of the component's behavior.

Just swap this.handleWaitlistClick() with your actual waitlist-specific onClick function, and you're all set!

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