Question

我在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>);
                }
            });

现在，我希望将className='active'添加到<li>元素（如果它是地图中的第一个元素）。我怎么做到这一点？

Answer 1

使用JS in your expression

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

使用reactjs检查地图中的第一个键

1 个答案: