javascript - 意外的标记 - JSX 中的 JavaScript 表达式

Question

我有一个输入字段，根据某些状态变化它应该是只读的。所以我写了如下的 JSX:

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

在上面的代码中，变量 reo 是硬编码的，但在实际场景中，它将根据某些条件进行评估，例如:

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

当我运行它时，它给出了unexpected token 错误。而当我这样写 JSX 时:

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

它工作正常。 请解释为什么会出现此错误以及如何更正它。

Answer 1

示例中的问题是您传递了一个字符串，而 React 需要一个名为 readonly 的 prop。

以下应该有效:

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} />
      );
    }