Блог

Главная - Вопросы по программированию - Троичный оператор не работает со встроенными стилями с помощью React [Hooks]

Троичный оператор не работает со встроенными стилями с помощью React [Hooks]

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие перехваты

Вопрос:

В принципе, у меня есть состояние, которое является истинным или ложным. Имя состояния — DisplayFirstColorPicker . Если это true, я хочу, чтобы встроенным стилем был const ‘showColorPicker’, если его false, это должен быть const ‘hideColorPicker’.

Однако, когда я запускаю встроенный троичный оператор, я получаю сообщение об ошибке «Не удалось скомпилировать».

Есть идеи, что не так?

Встроенный код:

Состояние:

   const [displayFirstColorPicker, setDisplayFirstColorPicker] = useState(false)

Встроенный код

 <div class="firstColorPicker" style={{DisplayFirstColorPicker ? {showColorPicker} : {hideColorPicker}}}>

В consts

 const showColorPicker = {
    display: "block",
  }

  const hideColorPicker = {
    display: "none",
  }

Ответ №1:

Вы делаете здесь всякие странные вещи. У вас слишком много фигурных скобок снаружи, а также не следует использовать объектную короткую нотацию, подобную {showColorPicker} той, которая компилировалась бы в { showColorPicker: { display: none} }

style={DisplayFirstColorPicker ? showColorPicker : hideColorPicker} должно сработать.

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

1. Извините, я все еще привыкаю к JSX. Продолжайте забывать, что как только я нахожусь в фигурных скобках, я могу свободно писать JS, и мне не нужно заключать каждую константу в фигурные скобки.

2. Да, там прямо javascript 🙂 так что, если нет стилей нравов, некоторые люди могут сделать styles={{ display: DisplayFirstColorPicker ? 'block': 'none'}}