ReactJSで条件マップ関数を使用するには？

Question

私は、反応jsを使用してajax呼び出しでブートストラップカルーセルを表示しようとしています。 Ajaxは、イメージ名、コンテンツタイトル、およびDOMに挿入したいスライドごとのメタ情報からなるjsonデータを受け取ります。したがって、私はすべてのスライドを生成するためにmap関数を使用します。私の問題は、最初のスライドのためにクラスactiveを追加したいということです。しかし、私はmap()の状態をどのように使うのか分かりません。 （私は条件付きactiveクラスを使用する場所SliderWidgetクラスで、私は実際にコメントを書いた）

var HomeCarousel = React.createClass({ 

getInitialState: function() { 
    return { 
     data: [] 
    } 
}, 


componentDidMount: function() { 
    $.get("/api/slider", function(result) { 

     this.setState({ 
      data: result 
     }); 
    }.bind(this)); 
}, 


render: function() { 

    return (
     <div id={"myCarousel"} className={"carousel slide"} data-ride="carousel"> 

      {this.state.data.map((slider, i) => <SliderWidget key = {i} data = {slider} />)} 
     </div> 
    ); 
} 

}); 


class SliderWidget extends React.Component { 
render() { 
    return (

     <div className={"item active"}> // here I want to use active class for the first slide 
      <img className={"first-slide"} src="images/pexels.jpeg" alt="First slide" /> 
      <div className={"container"}> 
       <div className={"carousel-caption"}> 
        <h3>Research Indicates Breakfast is the Most Important Meal</h3> 
        <p><a className={"btn btn-primary"} href="#" role="button">Find Out More</a></p> 
       </div> 
      </div> 
     </div> 

    ); 
} 
} 

ReactDOM.render(
    <HomeCarousel />, document.getElementById('react-home-carousel') 
); 

Answer 1

マップコールバックでiはループインデックスであるので、通過：

では、私が書かれている、反応させそれに応じてプロパティ：SliderWidgetで次に

this.state.data.map((slider, i) => 
    <SliderWidget key={i} data={slider} active={i===0} /> 
) 

：

render() { 
    return (
    <div className={"item" + this.props.active ? ' active' : ''}>... 
) 
} 

classnamesを使用すると、あなたの人生はさらに楽になります。