我有一个列表,每个列表元素点开都是一个全屏轮播图组件,全屏轮播图组件是一个,它接收每一个列表元素传过来的图片集,但我点开一个有 15 张轮播图后关闭,再点开一个 3 张图片的轮播图,那15张图片其中的 12 张还在HTML中!!!这个是啥问题呢?key 也设置了。。。
补充:
var FullScreenSlider = React.createClass({
render() {
var
slierItems = [];
this.props.imgs.forEach((obj, index)=>{
sliderItems.push(<SliderItem key={'slider-'+keyid++} />);
});
return (
<div>
{ sliderItems }
</div>
);
}
});
var List = React.createClass({
getInitialState() {
return {
imgs: '3张图片' // or '15张图片' or '1张图片'
};
},
handleSliderClick(){
this.context.showFullSlider(this.state.imgs);
},
render() {
return (
<div>
<ul>
<li onClick={this.handleSliderClick}>
3张图片
</li>
<li onClick={this.handleSliderClick}>
15张图片
</li>
<li onClick={this.handleSliderClick}>
1张图片
</li>
</ul>
</div>
);
}
});
var Trending = React.createClass({
showFullSlider(imgs){
this.setState({
images: imgs
});
},
render() {
return (
<div>
<List listData={this.state.data} />
<FullScreenSlider imgs={this.state.images} />
</div>
);
}
});
List 里面 三个 li 点击事件会调用父组件 Trending 的方法,设置要轮播的图片;FullScreenSlider 是一直挂载在 Trending 上的;
现在的问题就是:List 里面不管点击哪个 li 按钮,FullScreenSlider 里面的HTML DOM只会多,不会少,比如:点击 li(15张图片) 是正常的,在点击 li(1张图片) 的,轮播里面还是 15 张图片。。。