在循环中反应JS / JSX if语句

Question

我真的遇到了理解React逻辑的问题。为什么这个IF不起作用？您可以假设所有类都存在，并且循环也在起作用。好吧，即使条件似乎工作，但我的页面上的输出仍然是空白.....

    var Feature = React.createClass({
    componentDidMount: function(){
        $('input.rating[type=number]').rating();
        initFeatureInstallReady(this.props.feature.feature_id);
    },
    render: function(){

        var backgroundColor = "white";
        var item;
        var props = this.props;

        this.props.feature.slides.map(function(slide, i){

            if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else{

                item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureMain_Step feature={props.feature} slide={slide} />
                        </div>;
            }

        });

        return (
            <div className="carousel slide carousel-feature" data-ride="" data-interval="false" id={this.props.feature.feature_id}>
                <div className="carousel-inner" role="listbox" style={{backgroundColor: backgroundColor}}>
                    {item}
                </div>
            </div>
        );
    }
});

请帮助我，因为我真的没有得到它

Answer 1

您没有正确使用.map。它将转换数组中的每个元素，并返回一个新数组。您想保存该数组并显示它，而不是保存里面的变换函数。

var Feature = React.createClass({
    componentDidMount: function(){
        $('input.rating[type=number]').rating();
        initFeatureInstallReady(this.props.feature.feature_id);
    },
    render: function(){

        var backgroundColor = "white";
        var props = this.props;

        // convert each slide into a <div> in a brand new array
        //// `.map` will create a new array full of divs
        var items = this.props.feature.slides.map(function(slide, i){

            if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureReviewHomeAway feature={props.feature} slide={slide} />
                        </div>;

            }else{
                // return this slide converted to a <div>
                return <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
                            <FeatureMain_Step feature={props.feature} slide={slide} />
                        </div>;
            }

        });

        return (
            <div className="carousel slide carousel-feature" data-ride="" data-interval="false" id={this.props.feature.feature_id}>
                <div className="carousel-inner" role="listbox" style={{backgroundColor: backgroundColor}}>
                    {items}
                </div>
            </div>
        );
    }
});