Блог

Главная - Вопросы по программированию - Объединение объектов с помощью деструктурирования объектов и оператора turnary

Объединение объектов с помощью деструктурирования объектов и оператора turnary

#javascript #json #reactjs #ecmascript-6 #object-destructuring

#javascript #json #reactjs #ecmascript-6 #объект-деструктурирование

Вопрос:

Я пытаюсь определить стиль на основе нескольких логических переменных (sticky и isHidden).

Я знаю, что могу объединить 2 объекта, используя {...object1, ...object2}

Я пытаюсь применить ту же логику к вложенному объекту, чтобы этот стиль был результатом объединения объектов styles.stickyNav , styles.hide и styles.navBar если оба логических значения являются истинными, и но только style.navBar если ни одно из них не является истинным

 const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: fixed
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

const style={
  sticky ? {...styles.stickyNav} : {},
  isHidden amp;amp; sticky ? {...styles.hide} : {},
  {...style.navBar}
}

Пример вывода

Если оба логических значения имеют значение true, стиль должен быть

 {
  top: -60
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

Если ни то, ни другое не верно, то стиль должен быть

 {
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

если верно только значение sticky, то стиль должен быть

 {
  height: 60,
  position: fixed
  display: 'flex',
  width: '100%',
  background: 'white',
  boxShadow: "0 10px 6px -6px #777"
}

Ответ №1:

Я бы выбрал следующее, просто используя оператор распространения в изначально пустом объекте

 const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: 'fixed'
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

var sticky = true;
var isHidden = true;

/***Original ***/
/*const style={
  ...(sticky ? styles.stickyNav : {}),
  ...(isHidden amp;amp; sticky ? styles.hide : {}),
  ...styles.navBar
}*/

/*Improved Based on comment*/
const style={
  ...(sticky amp;amp; styles.stickyNav),
  ...((isHidden amp;amp; sticky) amp;amp; styles.hide),
  ...styles.navBar
}



console.log(style);

Обратите внимание, что было несколько ошибок консоли, которые требовали исправления

Комментарии:

1. Вы также могли бы сделать ...(sticky amp;amp; styles.stickyNav) и ...(isHidden amp;amp; sticky amp;amp; styles.hide) , потому что распространение логического значения возвращает пустой объект

2. @adiga ооо приятно, я обновил ответ на основе этого. Я использовал and additional (), поскольку это немного более читаемо для меня, это делает более очевидным, что такое сравнение.

Ответ №2:

Я бы попробовал что-то вроде:

 const style =
  isHidden amp;amp; sticky
    ? { ...styles.hide, ...styles.stickyNav, ...styles.navBar }
    : sticky
    ? { ...styles.stickyNav, ...styles.navBar }
    : style.navBar;

Ответ №3:

Это должно сработать.

 const style = sticky amp;amp; isHidden ?
    { ...styles.hide, ...styles.stickyNav, ...styles.navBar   } :
    sticky ? { ...styles.stickyNav, ...styles.navBar } : { ...styles.navBar };
  

 let sticky =  true;
let isHidden = true;

const styles = {
  hide: {  
    top: -60
  },
  stickyNav: {
      height: 60,
      position: 'fixed'
  },
  navBar:{
    display: 'flex',
    width: '100%',
    background: 'white',
    boxShadow: "0 10px 6px -6px #777"
  }
}

const style = sticky amp;amp; isHidden ?
    { ...styles.hide, ...styles.stickyNav, ...styles.navBar   } :
    sticky ? { ...styles.stickyNav, ...styles.navBar } : { ...styles.navBar };

console.log(style);