Неожиданный токен - JavaScript-выражение в JSX

Question

У меня есть поле ввода, которое должно быть доступно только для чтения при изменении состояния. Итак, я написал JSX, как показано ниже:

render: function() {
var reo = 'readonly';
return (<input id="output" type="Text" value="0" {reo}/>);
}

В приведенном выше кодовой переменной reo является жестко закодированным, но в реальном сценарии он будет оцениваться на основе некоторого условия, такого как:

var reo = (isDisabled ? 'readonly' : '');

Когда я запускаю это, он выдает неожиданную ошибку токена. Принимая во внимание, что когда я пишу JSX так:

<input id="output" type="Text" value="0" readonly/>

это работает нормально. Пожалуйста, объясните мне, почему эта ошибка происходит и как ее исправить.

Answer 1

Проблема в этом примере заключается в том, что вы передаете строку, в то время как реакции ожидают реквизит с именем readonly,

Следующее должно работать:

render: function() {
  var reo = true;
  return (
    <input id="output" type="Text" value="0" readonly={reo} />
  );
}

Или используя isDisabled:

render: function() {
      return (
        <input id="output" type="Text" value="0" readonly={isDisabled} />
      );
    }