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

Question

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

状态码UPDATE

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


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

我得到的错误是

Unexpected
   token, expected "..."

Answer 1

尽管您可以定义没有值的道具，但是您不能动态地做到这一点。传递值：

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

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

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

运行示例：

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

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

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

例如：

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

是相同的

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