Троичный оператор, который хочет использовать несколько троичных операторов в JavaScript

#javascript #reactjs

Вопрос:

В этом разделе кода, который является частью полного кода, который я опубликовал внизу,

 {
  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>
    )

Я хочу отделиться this.state.isEnableWaitlist от двух других this.props.program.application_required amp; this.isFree() внутри одного и того же оператора if, чтобы, если this.state.isEnableWaitlist у него будет своя собственная функция onClick, прежде чем он попадет во вторую часть оператора false, которая начинается с

 : (<>
  <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 amp; payment options. </p>
          <
            button type = "button"
            onClick = { _ => this.manualPayment() }
            style = {{
                padding: "10px",
                display: "block",
                marginLeft: "auto",
                marginBottom: 0
              }} >
          Confirm Order </button> </>
        )
      } </>
    )

1. Также вы можете разделить условия с помощью () , (x1 || x2) amp;amp; (x3 || x4)

2. С моей точки зрения, троичные операторы должны быть моментальными снимками из условия true или false. Чтобы улучшить обслуживание и читаемость вашего кода, почему бы не создать метод, который содержит все те условия, которые вы хотите протестировать и использовать в троичном условии? Я думаю, вы добавите больше смысла в свой код и порадуете следующего разработчика, читая этот код. Вы всегда можете добавить все, что хотите, к троичному условию, но вы также можете быть более склонны к ошибкам.

Ответ №1:

Ложные значения

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

Троичный

 condition ? yes : no;

condition
? 1
: condition2
  ? 1
  : 0

Логические И

 12 amp;amp; "hello" amp;amp; null amp;amp; 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 amp;amp;= 12;