TLDR;
将 className 添加到令人兴奋的 div
是否会重新加载 ReactJs 中的父组件?在按钮附近添加图像以显示 console.log
被多次调用。
这是错误..
我正在构建一个简单的“订购”应用程序,其中包括一个边栏。
我在一个新元素中重新创建了侧边栏以进行完整性检查。同样的问题。这是简单的版本。
class App extends Component {
constructor() {
super();
this.state = {
addList : [],
}
}
render() {
return (
<div className="App">
<Sidebar list = {this.state.addList}/>
</div>
);
}
}
export default App;
在侧边栏组件中
class Sidebar extends Component {
constructor(props){
super(props);
this.state = {
active : false
}
}
toggleSidebar () {
if (this.state.active) {
this.setState({
active : false
})
} else {
this.setState({
active: true
})
}
}
render () {
return (
<div className={ 'sidebar ' + ((this.state.active) ? '' : 'hidden')}>
<button className='tab' onClick={(e)=>{this.toggleSidebar()}}>
TAB
</button>
<div className="itemList">
{console.log(this.props.list)}
</div>
</div>
)
}
}
export default Sidebar;
sideBar 类有一个 position: fixed
我通过单击按钮将其移出屏幕并添加一个 hidden
className (.hidden { right : -x
)
当在父应用程序组件中选择一个元素时,它会添加到其状态 (addItem
)。
Sidebar 组件传递了该属性,因此当 addItem 获得一个新元素时,它会显示它。它按预期工作。我能够添加元素并显示它们没问题。
当我开始添加数字和计算总价等时,我注意到了这个错误,因为边栏似乎一直在渲染,我会发现自己陷入了无限的 setState 循环
任何解决方案或建议?
视觉图像(单击选项卡和控制台显示):
最佳答案
答案很简单,我傻。事实上,我正在改变侧边栏的状态导致重新加载。
因此,为了解决这个问题,让父组件保存这些值并将它们作为属性传递给侧边栏以仅显示。因此在重新加载时,值不会更改或重新添加。
关于javascript - ReactJS 组件在 className 更改时意外重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52270362/