Question

我有一个对象数组，我需要循环输出但是卡住了。我尝试使用jQuery＆＃39; .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一枪）但除了eugene safronov给出的答案之外。我想建议不要在返回本身内创建循环，以提高可读性和灵活性。请参阅示例和下面的示例。

    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的成功！

（更新：顺便说一句，现在我用_。来检查数据是否为空，但你也可以检查地图是否返回任何内容，然后显示不同的内容，保存1个额外功能：D）

在ReactJS的Render（）函数中循环

2 个答案: