Javascript 如何在ReactJS中使用条件映射函数？

我正在尝试使用react js通过ajax调用显示引导转盘。Ajax接收json数据，包括图像名称、内容标题和每张幻灯片的一些元信息，这些信息是我想在DOM中注入的。因此，我使用map函数生成所有幻灯片。我的问题是，在第一张幻灯片中，我想添加一个活动类。但我不知道如何在地图中使用条件

在React中，我写了：在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')
);

映射回调中的i是循环索引，因此相应地传递一个属性：

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

---

使用将使您的生活更加轻松。

它不会直接起作用。我做了一些改变，但你的回答给了我一些想法。

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