Динамически генерировать JSX

Question

Я хочу отобразить отключенную кнопку в JSX, как показано ниже:

render: function() {
return (<button type="button" disabled>Click Me!</button>);
}

Приведенный выше код работает нормально.Но когда я пытаюсь так:

render: function() {
var Reo = 'disabled';
return (<button type="button" {Reo}>Click Me!</button>);
}

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

Есть ли способ динамической генерации JSX.Например, как конкатенация:

'<button type="button" ' + Reo + '>Click Me!</button>'

Answer 1

render: function() {
  var Reo = "disabled";

  return (<button type="button" disabled={Reo === "disabled"}>Click Me!</button>);
}

Пропеллер disabled на кнопке определяется как логическое значение.Это означает, что вы можете выполнить любую логическую проверку для установки значения.