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
```
This commit is contained in:
Travis Ralston 2020-04-01 14:30:57 -06:00
parent 05b58dc81d
commit 0bb8973ee6

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>;
}
}