драгоценный камень-рельсы, что не так с моим стилем кофе?

Question

Это мой первый раз, когда я пытаюсь работать с реагированием. И я не понимаю, что происходит .. :)

А имеют:

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

Только элемент «Like» будет отображаться в LikeBox. Чтобы заставить его работать, вы можете сделать так:

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

В приведенном выше коде, ДИВ воздастся который содержит 2 дочерние элементы

Answer 2

Мы можем просто вернуть массив детей элементов LikeBox

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