为什么在render中使用变量,会却出现了对象不可扩展。
首先,定义变量。(以下步骤全在class内部执行)
boxOpenStyle={};
然后,在方法open中去增加一个属性。
open(){
this.boxOpenStyle.zIndex=9;
this.setState({visible:true});
}
在方法close中对该变量重新赋值。
close(){
this.boxOpenStyle.zIndex=8;
this.setState({visible:false});
}
最后,render中使用该变量。
render(){
return (
<div style={this.state.visible ? this.boxOpenStyle:{}}></div>
);
}
最后出现结果是:
1.当执行open方法时,程序正常运行。
2.当close方法被执行时,程序出错,告知对象只读,不可重新赋值。
如下图:
就算将boxOpenStyle放在state里面去改变,仍然会出现这样的错误。
但是如果将style变成id或className:
<div id={this.state.visible ? this.boxOpenStyle:{}}></div>
或
<div className={this.state.visible ? this.boxOpenStyle:{}}></div>
就不会出现这样的错误。
所以,请问这是react的什么机制触发了只读和不可扩展属性?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…