javascript - 在循环中响应 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。它将转换数组中的每个元素，并返回一个新数组。您想要保存该数组并显示它，而不是将变量保存在 inside 转换函数中。

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>
        );
    }
});