Javascript React不将div渲染为li标记

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

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

如果我把第4行注释掉，一切正常

---

为什么会这样？我什么都看不懂…

代码无法编译，因为您试图将react元素作为唯一参数传递给

react.DOM.li

，而它首先需要一个选项对象，然后是子对象

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

您需要将空哈希传递给

li

元素。您可以传递

null

而不是

{}

，它们都将被React作为空选项/attr对象

此外，您还可以使用coffeescript中的destructuring赋值使react代码看起来更干净：

{li, div} = React.DOM

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

使用coffeescript并在没有JSX的情况下做出反应的少数小组之一是Arkency，请查看更多提示

---

编辑：关于您的评论： 这可能是缩进的一种情况——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'

---

Thx）也许你能解释一下，为什么在这种情况下只渲染最后一个跨度

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

@nuT707我在答案中添加了一个关于您评论的编辑。如果答案不正确，请发布一个带有适当缩进的新问题，因为这对React和Coffeescript都非常重要