Question

我正在尝试使用react js通过ajax调用显示bootstrap轮播。 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' : ''}>... 
  )
}

使用classnames会让您的生活更轻松。

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

1 个答案: