我有以下反应脚本:
var Bilder = React.createClass({
getInitialState: function() {
return {
data:[
['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild1.jpg'],
['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild2.jpg'],
['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild3.jpg'],
['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild4.jpg'],
['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild5.jpg']
],
currentPic:[],
display:'showBild clearfix dn',
displayBg:'darkBg dn'
};
},
showBild: function(e, data){
console.log("PARENT COMPONENT SHOW BILD",e);
this.setState({
currentPic: e,
display: 'showBild clearfix db',
displayBg: 'darkBg db'
});
$('.showBild').attr('style', ''); // Hack
$('.darkBg').attr('style', ''); // Hack
},
hide: function(){
console.log("PARENT COMPONENT HIDE BILD");
this.setState({
display: 'showBild clearfix dn',
displayBg: 'darkBg dn'
});
},
render: function() {
return (
<div>
<SingleBild data={this.state.data} chosenBild={this.showBild} />
<BildDetail hide={this.hide} data={this.state.currentPic} display={this.state.display} displayBg={this.state.displayBg} />
</div>
);
}
});
var SingleBild = React.createClass({
getInitialState: function() {
return {
bild:[]
};
},
showBild: function(data, e){
e.preventDefault();
console.log("clicked a");
this.props.chosenBild(data);
},
render: function() {
var scopeThis = this;
var displayBild = function(bild){
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={scopeThis.showBild.bind(null, bild)} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
};
return (
<ul className="dashboardUl bilder clearfix">
<h2>Gemeldete Bilder:</h2>
{this.props.data.map(displayBild)}
</ul>
);
}
});
var BildDetail = React.createClass({
hide: function(){
this.props.hide();
},
render: function() {
var scopeThis = this;
return (
<div>
<div className={this.props.display}>
<img src={this.props.data[1]} alt="" />
<span>{this.props.data[2]}</span>
<ul>
<li><a href="#"><i className="fa fa-trash-o"></i></a></li>
<li><a href="#"><i className="fa fa-ban"></i></a></li>
</ul>
</div>
<div onClick={this.hide} className={this.props.displayBg}></div>
</div>
);
}
});
React.render(<Bilder />, document.getElementById('bilder'));
主要功能如下:
父组件<Bilder />
有2个子组件<SingleBild />
和<BildDetail />
。有4个初始状态,data:
是一个数组,包含一些虚拟条目和一些img路径,currentPic:
在某些操作发生时被填充,display:
+ displayBg
包含一些用于设置元素样式并隐藏它的类
在<SingleBild />
组件中,父组件的状态数组已作为prop传递。现在它被映射并渲染出来以显示单独的元素。这些元素的内容由img和2个图标组成。一个图标是可点击的。
可点击图标调用一个函数,该函数将一些内容传递给父组件,在该组件中调用另一个函数来改变状态并设置状态currentPic, display and displayBg
。
currentPic现在包含一个包含img src和所需内容的数组。另外两个州改变了一个来自&#34; dn&#34;到&#34; db&#34; (=从显示无类到显示块类)
现在一个div显示在包含img和另外两个图标的内容之上。在div后面有一个100%宽度和高度的黑色背景,它有一个onClick功能。 onClick函数称为hide,它将状态从&#34; db&#34;到&#34; dn&#34; (=从显示块类显示无类)
以某种方式反应不仅仅改变了类,而且还创建了一个内联样式,看起来像样式=&#34; display:none&#34;
因此,当我单击图标再次显示弹出窗口时,类会更改,但内联样式属性仍然存在并覆盖所有类样式...