gem react-rails，我的咖啡风格有什么问题？

Question

这是我第一次尝试使用react。我不明白这是怎么回事..:)

A拥有：

Dislike = React.createClass
  render: ->
    if @props.auth == true
      React.DOM.a
        className: ''
        React.DOM.i
          className: 'fa fa-thumbs-o-down'
          "Dislike (#{@props.num_dislike})"
    else
      React.DOM.i
        className: 'fa fa-thumbs-o-down'
        "Dislike (#{@props.num_dislike})"

Like = React.createClass
  render: ->
    if @props.auth == true
      React.DOM.a
        className: ''
        React.DOM.i className: 'fa fa-thumbs-o-up',
          "Like (#{@props.num_like})"
    else
      React.DOM.i
        className: 'fa fa-thumbs-o-up'
        "Like (#{@props.num_like})"

@LikeBox = React.createClass
  render: ->
    return (
      React.createElement(Dislike, @props)
      React.createElement(Like, @props)
    )

在我看来，有：

= react_component('LikeBox', {auth: current_user.present?,
                                  num_like: 23,
                                  num_dislike: 32,
                                  link_like: like_suggestion_path(suggestion),
                                  link_dislike: dislike_suggestion_path(suggestion)})

当我打开a页的时候：

<div data-react-class="LikeBox" data-react-props="{....}">
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-up" data-reactid=".0.0">Like (23)</i>
  </a>
</div>

但我的期望是：

<div data-react-class="LikeBox" data-react-props="{....}">
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-up" data-reactid=".0.0">Like (23)</i>
  </a>
  <a class="" data-reactid=".0">
    <i class="fa fa-thumbs-o-down" data-reactid=".0.0">Dislike (73)</i>
  </a>
</div>

这个区块有什么问题？

@LikeBox = React.createClass
  render: ->
    return (
      React.createElement(Dislike, @props)
      React.createElement(Like, @props)
    )

Answer 1

我们可以简单地返回LikeBox的子元素的数组

@LikeBox = React.createClass
  render: ->
    React.DOM.div
    className: 'like-box'
    [
      React.createElement(Dislike, @props)   
      React.createElement(Like, @props)
    ]

Answer 2

只有“Like”元素才会在LikeBox中呈现。要使其正常工作，您可以这样做：

@LikeBox = React.createClass
  render: ->
   React.DOM.div
    className: 'like-box'
    React.createElement(Dislike, @props)   
    React.createElement(Like, @props)

在上面的代码中，将呈现一个包含2个子元素的div