为什么标签空间会导致咖啡脚本出错

时间:2016-03-04 18:32:31

标签: reactjs coffeescript

我正在学习来自here的rails的反应。在下面的教程中我可以看到这个错误 ExecJS::RuntimeError in Records#index SyntaxError: [stdin]:41:13: cannot have an implicit value in an implicit object

然后从谷歌的一点点研究中,我开始知道错误即将到来,因为标签空间。

检查此反应js代码:



@RecordForm = React.createClass
  getInitialState: ->
    title: ''
    date: ''
    amount: ''
  render: ->
    React.Dom.form
      className: 'form-inline'
      React.DOM.div
        className: 'form-group'
        React.DOM.input
          type: 'text'
          className: 'form-control'
          placeholder: 'Date'
          name: 'date'
          value: @state.date
          onChange: @handleChange

        React.DOM.div
          className: 'form-group'
          React.DOM.input
            type: 'text'
            className: 'form-control'
            placeholder: 'Title'
            name: 'title'
            value: @state.title
            onChange: @handleChange
        React.DOM.div
          className: 'form-group'
          React.DOM.input
            type: 'number'
            className: 'form-control'
            placeholder: 'Amount'
            name: 'amount'
            value: @state.amount
            onChange: @handleChange
        React.DOM.button
          type: 'submit'
          className: 'btn btn-primary'
          disabled: !@valid()
            'Create record'

  handleChange: (e) ->
    name = e.target.name
    @setState "#{ name }": e.target.value

        valid: ->
        @state.title && @state.date && @state.amount

  handleSubmit: (e) ->
    e.preventDefault()
    $.post '', { record: @state }, (data) =>
      @props.handleNewRecord data
      @setState @getInitialState()
    , 'JSON'

  render: ->
    React.DOM.form
      className: 'form-inline'
      onSubmit: @handleSubmit




从上面的脚本中删除'Create record'之前的空格将解决问题。您可以通过此utility(link)

进行检查

1 个答案:

答案 0 :(得分:1)

您应该以两种方式声明对象,而您的编译器无法决定您使用哪种对象。

避免像你这样的错误的最好方法是选择每个声明中的一个方法。

# First way
obj =
  a : 1
  b : 2

# First way (compact)
obj = a : 1, b : 2

# Second way
# vars and props with same names (compact)
a = 1; b = 2
obj = {
  a
  b
}

# Second way (compact)
a = 1; b = 2
obj = {a, b}

您也可以使用React JSX support for Coffeescript

<强>更新

让我们看一下你的代码。

您可以发送两个这样的参数。

React.DOM.button
  type      : 'submit'
  className : 'btn btn-primary'
  disabled  : !@valid()
  , 'Create record'

或者那样。 输入对象和非对象的组合编译成两个参数。

  type      : 'submit'
  className : 'btn btn-primary'
  disabled  : !@valid()
  'Create record'

And what you do in your code编译器尝试将Object {'Create record' : 'Create record'}作为参数发送到调用!@valid()的结果中。

React.DOM.button
  type: 'submit'
  className: 'btn btn-primary'
  disabled: !@valid()
    'Create record'