我在理解 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>
);
}
});
我错过了什么?
最佳答案
您没有正确使用 .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>
);
}
});
关于javascript - 在循环中响应 JS/JSX if 语句,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32359765/