前景提要
父组件 state 更新触发渲染导致子组件中 iframe 也跟着刷新,莫名通过“原本子组件部署在父组件 render 中得 return 处,现将该处替换为 this.props.children,然后子组件对应部署在父组件得部署区得双标签内”来规避了
前半句 [父组件 state 更新触发渲染导致子组件中 iframe 也跟着刷新] 不知各位是否有遇见,
后半句是笔者误打误撞试错出来得“解决?”办法,至少规避了父组件重新渲染时子组件 iframe 一直在刷新.
这会儿想探究一下其中得原因,不知从何入手。
当然如果笔者对现象分析错误——“实际上压根没有上述这回事,导致该效果得实际原因是别的什么”
还请 v 佬们告知。
业务逻辑以及项目结构得话大概描述一下
<Router basename="/" hashType="hashbang"> <Switch> <Route path="/main" component={()=><LayoutContainer> <ChildRoute/></LayoutContainer>}/> </Switch> </Router> //LayoutContainer 里是一堆布局,挑个合适得地方塞上{this.props.children}
然后 ChildRoute 里就是二级路由以及 iframe 的配置 <Route exact path={'/main/'+item.part} key={item.all} component={()=><iframe name="mainFrame" style={{width: '100%', height: screenHeight, border:'0px'}} onLoad={()=>this.setState({loading:false})} sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation" src ={fullsrc}></iframe>/>}/>
流程就是,点击布局页面切换了登陆用户得身份会更新 state 导致 LayoutContainer 重新渲染,若不采用 this.props.children 得法子将导致其“子组件”得 iframe 也跟着刷新了