检查地图中是否有第一次迭代的方法

Way to check if first iteration in map

本文关键字：迭代 方法 第一次 地图 是否 检查      更新时间：2023-09-26

我正试图使用map函数将类添加到ReactJS中的元素中，但仅限于循环中的第一个，这可能/是一种简单的方法吗？

return (
  <div key={itemData.itemCode} className="item active">
    Want to add 'active' class when the first but for the others dont add it
  </div>
)

如果您使用.map或.forEach，那么您可以像这样使用

var List = React.createClass({
    render: function() {
      var lists = this.props.data.map(function (itemData, index) {
         /// if index === 0 ( it is first element in array ) then add class active 
         var cls = (index === 0) ? 'item active' : 'item'; 
         return <div key={itemData.itemCode} className={ cls }>
           { itemData.itemValue }
         </div>;
      })
      return <div>{ lists }</div>;
    }
});

Example

如果您需要有条件地更改类，也有一个名为classnames的好软件包，比如您的

var List = React.createClass({
    render: function() {
      var lists = this.props.data.map(function (itemData, index) {
        return <div 
            key={itemData.itemCode} 
            className={ classnames('item', { active: index === 0 }) }>
          { itemData.itemValue }
        </div>
      })
      return <div>{ lists }</div>;
    }
});

Example

相关文章：