意外的令牌 - JSX中的JavaScript表达式

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

示例中的问题是您传递一个字符串，而react期望一个名为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} />
      );
    }