Как написать несколько назначений с условным оператором в одну строку? - PullRequest
Новая
       29

Как написать несколько назначений с условным оператором в одну строку?

0 голосов
/ 29 марта 2020

Я хочу знать, как я могу записать эти условные присвоения в одну строку.

Код в моем проекте React: 

const activeBox = calendarTab ? 'schedule-box active-box' : 'schedule-box';
const engagementBox = engagement ? 'schedule-box active-box' : 'schedule-box';
const scheduleBox = weekSchedule ? 'schedule-box active-box' : 'schedule-box';

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Я использовал Массив # деструктурирование с Backtick . Как вы добавляете "active-box", если условие истинно. 

const isActive = (condition) => condition ? "active-box" : "";

const [activeBox, engagementBox, scheduleBox] = [
      `schedule-box ${isActive(calendarTab)}`,  // This value goes to activeBox variable
      `schedule-box ${isActive(engagement)}`,  // This value goes to engagementBox variable
      `schedule-box ${isActive(weekSchedule)}` // This value goes to scheduleBox variable
]

Надеюсь, это может вам помочь.

1 голос
/ 29 марта 2020

Однострочное решение

Использование объекта Разрушающее присваивание и Object.fromEntries () 

const calendarTab = true;
const engagement = false;
const weekSchedule = false;
  
const { activeBox, engagementBox, scheduleBox } = Object.fromEntries(
  [calendarTab, engagement, weekSchedule].map((item, idx) => [
    [`activeBox`, `engagementBox`, `scheduleBox`][idx],
    item ? "schedule-box active-box" : "schedule-box"
  ])
);
  
console.log(activeBox);
console.log(engagementBox);
console.log(scheduleBox);

Вы можете определить список отношений, чтобы упростить его 

const data = [
  { id: "calendarTab", value: true, attr: "activeBox" },
  { id: "engagement", value: false, attr: "engagementBox" },
  { id: "weekSchedule", value: false, attr: "scheduleBox" }
];

const result = Object.fromEntries(
  data.map(x => [
    x.attr,
    x.value ? "schedule-box active-box" : "schedule-box"
  ])
);

console.log(result.activeBox);
console.log(result.engagementBox);
console.log(result.scheduleBox);

Для обычной реализации не в одну строку: 

const calendarTab = true;
const engagement = false;
const weekSchedule = false;

const aqClass = value => {
  return value ? "schedule-box active-box" : "schedule-box"
}
const activeBox = aqClass(calendarTab);
const engagementBox = aqClass(engagement);
const scheduleBox = aqClass(weekSchedule)

console.log(activeBox);
console.log(engagementBox);
console.log(scheduleBox);
...