admin管理员组文章数量:1312783
I am having issues understanding the React logic. Why is this IF not working? You can assume all classes are there and also the loop is working. Even the condition seem to work but the output on my page is still blank.
var Feature = React.createClass({
ponentDidMount: 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>
);
}
});
What am I missing?
I am having issues understanding the React logic. Why is this IF not working? You can assume all classes are there and also the loop is working. Even the condition seem to work but the output on my page is still blank.
var Feature = React.createClass({
ponentDidMount: 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>
);
}
});
What am I missing?
Share Improve this question edited May 26, 2020 at 18:43 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Sep 2, 2015 at 17:40 Digital HumanDigital Human 1,6371 gold badge18 silver badges27 bronze badges 1-
You're using
mapbut the thing you're trying to render is calleditem-- is item supposed to be 1 element or an array of elements? – Jim Skerritt Commented Sep 2, 2015 at 17:57
1 Answer
Reset to default 6You're not using .map correctly. It will transform each element in your array, and return a new array. You want to save that array, and show it, not save a variable inside the transform function.
var Feature = React.createClass({
ponentDidMount: 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>
);
}
});
本文标签： javascriptReact JSJSX if statement in loopStack Overflow
版权声明：本文标题：javascript - React JSJSX if statement in loop - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741896289a2403594.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论