OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Move rendering of PersistedElements into other lifecycle stages 

For https://github.com/vector-im/riot-web/issues/12877

Original error:
```
Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.

Check the render method of PersistedElement.
    in PersistedElement (created by AppTile)
    in div (created by AppTile)
    in div (created by AppTile)
    in AppTile (created by AppsDrawer)
    in div (created by AppsDrawer)
    in div (created by AppsDrawer)
    in AppsDrawer (created by AuxPanel)
    in div (created by AutoHideScrollbar)
    in AutoHideScrollbar (created by AuxPanel)
    in AuxPanel (created by RoomView)
    in div (created by RoomView)
    in div (created by MainSplit)
    in MainSplit (created by RoomView)
    in ErrorBoundary (created by RoomView)
    in main (created by RoomView)
    in RoomView (created by LoggedInView)
    in div (created by LoggedInView)
    in DragDropContext (created by LoggedInView)
    in div (created by LoggedInView)
    in LoggedInView (created by MatrixChat)
    in ErrorBoundary (created by MatrixChat)
    in MatrixChat
```
pull/21833/head
Travis Ralston 2020-04-01 14:30:57 -06:00
parent 05b58dc81d
commit 0bb8973ee6
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/views/elements/PersistedElement.js
View File

@ -113,10 +113,12 @@ export default class PersistedElement extends React.Component {
componentDidMount() {
this.updateChild();
this.renderApp();
}
componentDidUpdate() {
this.updateChild();
this.renderApp();
}
componentWillUnmount() {
@ -141,6 +143,14 @@ export default class PersistedElement extends React.Component {
this.updateChildVisibility(this.child, true);
}
renderApp() {
const content = <div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>;
ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
}
updateChildVisibility(child, visible) {
if (!child) return;
child.style.display = visible ? 'block' : 'none';
@ -160,12 +170,6 @@ export default class PersistedElement extends React.Component {
}
render() {
const content = <div ref={this.collectChild} style={this.props.style}>
{this.props.children}
</div>;
ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
return <div ref={this.collectChildContainer}></div>;
}
}