javascript - 三元运算符，希望在 JavaScript 中使用多个三元运算符

Question

在这部分代码中，这是我在底部发布的完整代码的一部分，

{
  this.props.program.application_required ||
    this.state.isEnableWaitlist ||
    this.isFree() ? ( <
      button type = "button"
      onClick = { _ => this.manualPayment() }
      style={{
          padding: "10px",
          display: "block",
          marginLeft: "auto",
          marginBottom: 0
        }}>
      {
        this.props.program.application_required ||
        this.state.isEnableWaitlist ?
        "Submit Application" :
          "Confirm Order"
      } </button>
    )

我想在同一个 if 语句中this.state.isEnableWaitlist与其他两个this.props.program.application_required&分开，以便在它遇到以this.isFree()this.state.isEnableWaitlist

: (<>
  <p style = {{
      padding: "20px",
      fontFamily: "Open Sans, sans-serif"
    }}.

在三元运算符中最好的方法是什么？

这是下面的完整代码

{
  this.props.program.application_required ||
    this.state.isEnableWaitlist ||
    this.props.program.manual_invoices ||
    this.isFree() ? (<> {
        this.props.program.application_required ||
        this.state.isEnableWaitlist ||
        this.isFree() ? ( <
          button type = "button"
          onClick = { _ => this.manualPayment() }
          style = {{
              padding: "10px",
              display: "block",
              marginLeft: "auto",
              marginBottom: 0
            }} >
          {
            this.props.program.application_required ||
            this.state.isEnableWaitlist ?
            "Submit Application" :
              "Confirm Order"
          } </button>
        ) : ( <>
          <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> </>
        )
      } </>
    )

标签： javascriptreactjs

Answer 1

虚假值

[0, "", '', false, null, undefined]

三元

condition ? yes : no;

condition
? 1
: condition2
  ? 1
  : 0

逻辑与

12 && "hello" && null && undefined // return first falsy value

逻辑或

12 || "hello" || null || undefined // return first truthy value

无效合并

0 ?? "hello" // 0
false ?? "hello" // false

逻辑无效赋值

// Normal
let x = null;
 
if (x === null || x === undefined) {
  x = 12;
}

// Advanced
let x = null;
 
x ??= 12;

逻辑或赋值

// Normal
let x = false;
 
if (!x) {
  x = 12;
}

// Advanced
let x = false;
 
x ||= 12;

逻辑与赋值

// Normal
let x = "Truthy value";
 
if (x) {
  x = 12;
}

// Advanced
let x = "Truthy value";
 
x &&= 12;