React意外的令牌，预计“......”

Question

我在这段代码中做错了什么，我不知道怎么写它我想测试状态invalidForm并渲染禁用或null取决于。

州代码更新

if(valid) {
        return true;
    } else {
      this.setState({
        invalidForm: true
      })
    }
}


<button {this.state.invalidForm ? 'disabled' : null} type="submit">Submit</button>

我得到的错误是

Unexpected
   token, expected "..."

Answer 1

While you can define props without a value，你不能动态地这样做。传递一个值：

<button disabled={this.state.invalidForm}>Submit</button>

它应该没关系，但为了清楚起见，如果this.state.invalidForm不是布尔值，您可以将其转换为：

<button disabled={Boolean(this.state.invalidForm)}>Submit</button>

运行示例：

ReactDOM.render(
  <div>
    <button disabled={true}>Button 1</button>
    <button disabled={false}>Button 2</button>
  </div>,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

---

解析器期望...，因为开头“标签”内的{}语法被保留用于从对象“传播”道具。

例如：

const props = {disabled: true};
return <button {...props}>Submit</button>

是相同的

return <button disabled={true}>Submit</button>