React 不将 div 渲染到 li 标签中

React not render div into li tag

无法呈现此代码，得到 SyntaxError: [stdin]:4:1: 意外缩进

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

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

为什么会这样？什么都看不懂...

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

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

您需要将空散列传递给 li 元素。你可以传递 null 而不是 {}，它们都将被 React 视为一个空的选项/属性对象。

此外，您可以使用 coffeescript 中的解构赋值来使 React 代码看起来更简洁：

{li, div} = React.DOM

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

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

编辑：关于您的评论：

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

如果您想渲染嵌套在第一个跨度中的第二个跨度：

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

如果您希望将两者呈现为兄弟姐妹，则需要将它们包装在父元素中，因为您只能 return 来自 React 渲染方法的一个组件：

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