0

这是我第一次尝试使用 react。而且我不明白发生了什么.. :)

一个有：

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)})

当我打开页面时，有：

<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)
    )
4

2 回答 2

1

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

@LikeBox = React.createClass
  render: ->
    React.DOM.div
    className: 'like-box'
    [
      React.createElement(Dislike, @props)   
      React.createElement(Like, @props)
    ]
于 2016-01-18T09:32:50.737 回答
0

LikeBox 中只会呈现“Like”元素。为了使它工作，你可以这样做：

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

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

于 2015-12-11T02:11:28.063 回答