Жизненный цикл компонентов React идет рука об руку с DOM, поэтому, когда я пытаюсь выполнить рендеринг на стороне сервера после асинхронного действия, у меня возникают проблемы.
У меня есть компонент (назовем его содержащим компонент), который отвечает за динамический импорт другого компонента (назовем его внутренним компонентом) в соответствии с данными, передаваемыми в его подпорках.
Как только обещание импорта разрешено, я бы хотел отобразить внутренний компонент внутри содержащего его компонента.
Проблема в том, что у меня нет возможности получить доступ к жизненному циклу содержащего компонента.
render () запускается только один раз при создании содержащего компонента.
Обновление компонента с помощью forceUpdate () и setState () невозможно по той же причине, по которой компонентDidMount () никогда не будет вызываться.
Как выполнить рендеринг компонента после асинхронного действия на стороне сервера при использовании рендеринга сервера?
Пока мой код:
import React from 'react';
export default class ComponentLoader extends React.Component<{ component: string }, { component: any }> {
constructor(props) {
super(props);
this.state = {
component: null
}; //no-op
}
componentDidMount(): void {
//never called
}
componentWillMount(): void {
import('./' + this.props.component).then(module => {
this.forceUpdate(); //no-op
this.setState({ component: React.createElement(module.default) }); //no-op
});
}
render() {
//called only once during construction
return this.state.component || null; //this.state won't be available, nor will it matter if I access component any other way since render() won't be called again once that component is resolved anyway.
}
}