React不会将div渲染成li标签

Question

无法呈现此代码，获取 SyntaxError：[stdin]：4：1：意外缩进

@Statement = React.createClass
  render: ->
    React.DOM.li
      React.DOM.div
        className: 'statement'
        @props.statement.body

如果我注释掉行号 4 ，一切正常。

为什么会这样？我什么都听不懂......

Answer 1

代码将无法编译，因为您尝试将react元素作为唯一参数传递给React.DOM.li，而它首先需要一个options对象，然后是一个子对象。

@Statement = React.createClass
  render: ->
    React.DOM.li {},
      React.DOM.div
        className: 'statement'
        @props.statement.body

您需要将空哈希传递给li元素。您可以传递null而不是{}，它们将被React视为空选项/ attr对象。

此外，您可以使用coffeescript的解构分配来使反应代码看起来更清晰：

{li, div} = React.DOM

@Statement = React.createClass
  render: ->
    li {},
      div
        className: 'statement'
        @props.statement.body

使用coffeescript和没有JSX的React的少数几个小组之一是Arkency，请查看their resources以获取更多提示。

编辑：关于您的评论：

可能是缩进的情况 - Coffeescript隐式返回函数或块中最后一个表达式的结果。

如果你想渲染嵌套在第一个范围内的第二个范围：

render: -> 
  React.DOM.span null, 
    '123' 
    React.DOM.span null, 
      'sdfdfg'

如果你想将这两个作为兄弟姐妹渲染，你需要将它们包装在父元素中，因为你只能从React的渲染方法中返回一个组件：

render: -> 
  React.DOM.div null, 
    React.DOM.span null, 
       '123' 
    React.DOM.span null, 
      'sdfdfg'