Блог

Главная - Вопросы по программированию - Передача значений javascript в JSX

Передача значений javascript в JSX

#javascript #reactjs #react-redux

#javascript #reactjs #реагировать-redux

Вопрос:

Я хочу достичь этой функциональности с помощью тернарного оператора. Здесь iconElement — это переменная javascript, содержащая JSX. Я получаю ошибку, подобную этой (скриншот прилагается). Как этого добиться?введите описание изображения здесь

 <div className = 'InputFieldGroup'>

    {
        inputField ? inputField : 
            {iconElem}
            <input
                {...otherProps}
                className = 'InputField'
                value = {value}
                onChange = {clicked}
                autoComplete = 'off' />
        
    }

</div>

Ответ №1:

Ранее при использовании троичного оператора возникала синтаксическая ошибка:

 <div className="InputFieldGroup">
  {inputField ? (
    inputField
  ) : (
    <>
      {iconElem}
      <input
        {...otherProps}
        className="InputField"
        value={value}
        onChange={clicked}
        autoComplete="off"
      />
    </>
  )}
</div>

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

1. Я хочу выполнить как переменную iconElem, так и поле ввода только тогда, когда троичное условие равно false

2. Вы можете вернуть только один элемент React, поэтому вам следует добавить фрагмент, см. Обновленный ответ

Ответ №2:

Если поле ввода должно быть видимым в обоих случаях, я бы сделал что-то подобное вместо этого, чтобы избежать необходимости дублировать компоненты:

 <div className="InputFieldGroup">
   {!inputField amp;amp; iconElem}
      <input
        {...otherProps}
        className="InputField"
        value={value}
        onChange={clicked}
        autoComplete="off"
      />
  )}
</div>