Можно ли отрендерить реакт-компонент императивно?

Question

[Никита Кит]

Дано:
Сервис на реакт, бОльшая часть работы которого лежит за аутентификацией.
Синглтон для ajax, который ничего не знает о реакте. Просто абстрактный класс.
Компонент Alert - каркас самого уведомления. И AlertRenderer - обёртка для алертов, которая порталит их (ReactDOM.createPortal(...)) в общую обёртку алертов на уровне App.js

Нужно:
Создать механизм обработки общих ошибок от сервера. Т.е ajax ловит ошибку, и если её обработка самим мной мне запревенчена опциями вызова метода ajax, то императивно вызывать рендер конкретного компонента, отдавая ему пропы так же императивно.
То есть хотелось бы чего-то типа

import Alert from './components/common/Alert'
 .catch(error) {
   Alert.set({textError: `${error.code}: ${error.message}`})
}

Я понимаю что можно было бы написать нативный класс для алертов со своим чистым ждаваскриптовым методом рендера не наследуясь от реакта, но это будет дубликат. Где-то я завязываю алерты на стейт компонента и вызываю из jsx, но в данном случае мне нужно вызвать его так.
Можно, конечно, обойти проблему - в стейт app.js сложить объект для массива ошибок, в нём же сетнуть в класс ajax колбэк, который бы этот массив пополнял при возникновении ошибки, но 1 - это излишне, мне не нужна реактивность стейта для простой обработки ajax ошибок, а 2 - мне интересно есть ли вообще у реакта возможность императивного рендера компонентов

Comments

[Роман Александрович]

как вариант https://reactjs.org/docs/react-component.html#forc...

[Никита Кит]

Роман Александрович, ну это какой-то лихой топорик, но можно копнуть и в его сторону. Попробую создать метод в рендерере алерта, через который прокину в алерт нужные пропы и вызову этот forceUpdate. Отпишусь как получится

[Роман Александрович]

Никита Кит, вы не хотите использовать реактивность и при этом вам как то надо заставить компонент обновиться. Ну на ум другого мне ничего не приходит.

[Никита Кит]

Роман Александрович, реакт вставил палку в колесо.
Запорталить можно только в рендер-функции. Если я сохраняю new AlertRenderer в переменную, он не вызывает render-функцию, и forceUpdate я выполнить не могу.

// тот самый
class AlertRenderer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {...props}
    }
    /*
    options
        errorText - string
    */
    setNewAlert(options) {
        this.setState(state => {
            state.children = options.errorText
            state.warning = true;
            return Object.assign({}, state)
        }, () => {
            this.forceUpdate()
        })
    }
    render() {
        return ReactDOM.createPortal(<Alert {...this.props}/>, document.getElementById("alerts"));
    }
}

Я попытался вручную его зарендерить, но реактДОМ жалуется

const alert = new AlertRenderer();
document.getElementById('alerts').innerHTML = alert.render();
// получил Uncaught Invariant Violation: Target container is not a DOM element. от reactDOM

[Никита Кит]

Роман Александрович, Bingo!
https://ru.reactjs.org/blog/2015/10/01/react-rende...
И это работает. Для императивного вызова пришлось создать отдельный класс, который как я и думал не будет наследовать реакт. Его основное отличие в том, что рендер вызывается в конце конструктора. Объединить их уже не выйдет, но и не страшно. Всё равно у обоих обёрток разная цель применения

class AlertCaller {
    constructor(options) {
        this.state = {
            children: options.textError
        }
        this._render();
    }
    
    _render() {
        console.log(this.state)
        ReactDOM.render(
        <Alert {...this.state} />,
        document.getElementById("alerts")
        );
    }
    destroy() {
        ReactDOM.unmountComponentAtNode(this._container);
    }
}

Ну и AlertRenderer остался для вызова алертов, завязаных на стейт приложения.

[Роман Александрович]

Никита Кит, прикольный выход из положения

Answer 1

[Никита Кит]

https://ru.reactjs.org/blog/2015/10/01/react-rende...

class AlertCaller {
    constructor(options) {
        this.state = {
            children: options.textError
        }
        this._render();
    }
    
    _render() {
        ReactDOM.render(
        <Alert {...this.state} />,
        document.getElementById("alerts")
        );
    }
    destroy() {
        ReactDOM.unmountComponentAtNode(this._container);
    }
}

thanx Роман Александрович for resolving way