如何使用 ReactJS 中的条件映射函数

Question

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

在 React 中，我写道：（SliderWidget类中，我写了一个评论，实际上我应该有条件地使用active类）

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是循环索引，因此相应地传递一个属性：

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

然后在SliderWidget：

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

使用类名会让你的生活更轻松。