【问题标题】：React not render div into li tag反应不将 div 渲染成 li 标签
【发布时间】：2017-09-06 15:26:42
【问题描述】：

无法渲染此代码，得到 SyntaxError: [stdin]:4:1: unexpected indentation

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

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

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

【问题讨论】：

【解决方案1】：

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

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

您需要将空哈希传递给li 元素。你可以传递 null 而不是 {}，它们都会被 React 当作一个空的 options / attr 对象。

此外，您可以使用来自 coffeescript 的解构赋值来使反应代码看起来更干净：

{li, div} = React.DOM

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

在没有 JSX 的情况下使用 coffeescript 和 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'

【讨论】：

Thx) 也许你可以解释一下，为什么在这种情况下只呈现最后一个跨度？ render: -> React.DOM.span null, '123' React.DOM.span null, 'sdfdfg'
@nuT707 我在您的评论的答案中添加了一个编辑。如果这不是正确的答案，请发布一个带有适当缩进的新问题，因为这对 React 和 Coffeescript 都非常重要