ReactJS的Render()函数中的循环

Question

我有一个对象数组，需要在其上循环输出，但却被卡住了。我尝试使用jQuery的.each()，但没有成功。

render: function() {
  return (
  $.each(events, function(k, e) {
     <div className="event-item-wrap">
     <div className="event-item" style="backgroundImage:e.Image">
       <div className="event-item-date">e.Date</div>
       <div className="event-item-title">e.Title</div>   
       <div className="event-item-price">e.Price</div>
       <div className="event-item-bottom">
         <div className="event-item-tags">
           <ul>
             <li>#professional</li>  
             <li>#livejazz</li>
             <li>#courtet</li>
           </ul>
         </div>
       </div>
     </div>
     </div>
     });
  );
}

我的数组包含带有键和值的简单Javascript对象。如何在React中渲染它们？

Answer 1

下面是一个在Reactjs中通常如何执行循环的示例

var List = React.createClass({
   render: function() {
     return (
    { this.props.data.map(function(e) {
            var eventStyle = {
              backgroundImage:e.Image
            };

            return (
                     <div className="event-item-wrap">
                      <div className="event-item"style="{eventStyle}">
                      <div className="event-item-date">{e.Date}</div>
                     <div className="event-item-title">{e.Title}</div>   
                      <div className="event-item-price">{e.Price}</div>
                     <div className="event-item-bottom">
                      <div className="event-item-tags">
                  <ul>
                    <li>#professional</li>  
                    <li>#livejazz</li>
                    <li>#courtet</li>
                  </ul>
              </div>
          </div>
      </div>
   </div>

            )
        })
    }
    );
 }
});



React.render(<List data={ (Array goes here) }  />, document.body);

Answer 2

我完全同意Dominic Tobias的回答，忘记jQuery，因为我们不会操纵dom，也不需要这样做。对于所有其他帮助器，请使用本机函数或_。或者给(es6一个镜头)，但除了尤金·萨夫罗诺夫给出的答案之外。出于可读性和灵活性的考虑，我建议不要在return本身中创建循环。参见example和下面的示例。

    var List = React.createClass({
        render: function () {
            var eventItems = this.props.data.map(function (item) {
            var itemStyle = {
              backgroundImage:item.Image
            };
                return (
                    <div className="event-item-wrap">
                        <div className="event-item"style="{itemStyle }">
                            <div className="event-item-date">{item.Date}</div>
                            <div className="event-item-title">{item.Title}</div>   
                            <div className="event-item-price">{item.Price}</div>
                            <div className="event-item-bottom">
                                <div className="event-item-tags">
                                    <ul>
                                        <li>#professional</li>  
                                        <li>#livejazz</li>
                                        <li>#courtet</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            });

            return (
                <div className="app">
                    { eventItems }
                </div>
            );
        }
    });

    React.render(<List data={ (itemsArray) }  />, document.body);

--没有数据的例子--

    var List = React.createClass({
        render: function () {

            var eventItems;

            if(_.isEmpty(this.props.data)) { // i used lodash/underscore _. for this example)
                eventItems = (
                    <span>No items to display</span>
                );
            } else {
                eventItems = this.props.data.map(function (item) {
                    var itemStyle = {
                      backgroundImage:item.Image
                    };
                    return (
                        <div className="event-item-wrap">
                            <div className="event-item"style="{itemStyle }">
                                <div className="event-item-date">{item.Date}</div>
                                <div className="event-item-title">{item.Title}</div>   
                                <div className="event-item-price">{item.Price}</div>
                                <div className="event-item-bottom">
                                    <div className="event-item-tags">
                                        <ul>
                                            <li>#professional</li>  
                                            <li>#livejazz</li>
                                            <li>#courtet</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                });
            }

            return (
                <div className="app">
                    { eventItems }
                </div>
            );
        }
    });

    React.render(<List data={ (itemsArray) }  />, document.body);

它增加了一些额外的灵活性和可靠性。我希望这对你有一点帮助，成功使用ReactJs！

(更新:顺便说一句，现在我用的是_。要检查数据是否为空，但您也可以检查map是否没有返回任何内容，然后显示不同的内容，保存一个额外的函数:D)