反应意外的令牌,预期为“ ...”

时间:2018-09-10 23:20:08

标签: javascript reactjs

此代码中我在做什么错,我不知道该怎么写,我想测试状态invalidForm并根据情况将其禁用或为空。

状态码更新

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


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

我遇到的错误是

Unexpected
   token, expected "..."

1 个答案:

答案 0 :(得分:5)

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>