Javascript 使用reactjs检查映射中的第一个键

我在ReactJS中有以下组件

var MainMenu = React.createClass({
                render: function() {
                    console.log(this.props.groupsData);
                    var categories = this.props.groupsData.objects.map(function(obj){
                        return (<li><a href="#">{obj.display_name}</a></li>);   
                    });
                    return (<div className="MainMenu">
                            <ul className="nav nav-pills">{categories}</ul>

                        </div>);
                }
            });    

var main菜单=React.createClass({
render:function（）{
console.log（this.props.groupsData）；
var categories=this.props.groupsData.objects.map（函数（obj）{
返回（
）；
});
返回(
{categories}
);
}
});    

现在，我希望将

className='active'

添加到

元素，如果它是映射中的第一个元素。如何实现这一点？

使用

var main菜单=React.createClass({
render:function（）{
console.log（this.props.groupsData）；
var categories=this.props.groupsData.objects.map（函数（obj，索引）{
//可以在表达式中使用JavaScript表达式
返回（
）；
});
报税表（
{
类别
}
);
}
});

Brilliant，我以前尝试过使用表达式，但出现了一个奇怪的错误，但效果非常好。谢谢。有关.map方法的文档：

var MainMenu = React.createClass({
  render: function() {
    console.log(this.props.groupsData);
    var categories = this.props.groupsData.objects.map(function(obj, index) {
      // You can have a JavaScript expression in your expression 
      return ( <li className={index == 0 ? 'active' : ''}> <a href="#">{
        obj.display_name
      }</a></li> );
    });
    return ( <div className="MainMenu" >
      <ul className="nav nav-pills" >{
        categories
      }</ul>

   </div> );
  }
});