父组件 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 也跟着刷新了
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.