Как изменять state компонента react js извне?

Question

[Андрей]

В проекте потребовалось динамически создавать и показывать простое модальное окно по клику на кнопке.
Задумка такая: при клике генерируется событие, все слушатели как-то на него реагируют. Среди них есть компонент модального окна, который на основе получаемых данных рендерит соответствующий блок или, при необходимости, обновляет в нем данные.

Можно было бы взять любой шаблонизатор, тот же nunjucks, который мне как родной, и создавать это самое окно.
Но так как в дальнейшем в проекте скорее всего будут более сложные элементы, я решил с заделом на будущее взять в качестве View React js, с которым , правда, совсем никогда не работал.

Получилось как-то так:

....
        this.on('showModal', function (data) {
            ReactDOM.render(
                <this.renderWindow data={data} />,
                this.el
            );
        });
....

Модальное окно создается, все ок. Теперь его надо как-то скрывать. Добавляю состояние this.state.show.
Теперь по клику оно даже скрывается.
Но по событию 'showModal', оно повторно не показывается. Я так понимаю, что вызывается ReactDOM.render(...); Реакт проверяет состояние - оно не изменилось, this.state.show все еще равно false, и он просто ничего не делает.

Я смотрел примеры реализации модального окна на Реакте. В них всегда кнопка "Показать окно" является частью компонента и просто меняет state.
У меня эта кнопка находится вообще в другом месте, рендерится на сервере и я ее никак не хочу связывать с окном или делать реакт-компонентом. Хотелось бы просто по событию менять state компонента.
Но как это сделать - не пойму.
Или лучше вообще в таком случае не тащить Реакт в проект и сделать view на чем-то другом?

Answer 1

[Risent Veber]

Просто подпишетесь на это событие в методе componentDidMount и меняйте state как вам вздумается.

Comments

[Андрей]

Да, решение рабочее. Но в моем случае я не хотел бы рендерить окно сразу, оно возможно пользователю и не будет показано. Зачем сразу ему все барахло грузить?
Если окно нет - его надо отрендерить по событию, если оно уже есть - обновить данные (при необходимости) и просто показать.

Я сейчас сделал вот так:
...
var modal;

this.on('showModal', function (data) {
if(!modal) {
modal = ReactDOM.render(
,
this.el
);
} else {
modal.props.data = data;
modal.show();
}

}, this);
...
и соответственно метод:
...
show: function () {
this.setState({show: true})
},
...

Но мне кажется, это похоже на какую-то содомию. Я прав?

[Андрей]

форматирование сломало весь код, но, думаю, понятна идея, она в
modal.props.data = data;
modal.show();

[Amazing-Space-Invader]

Андрей: Ну, предположим у нас есть state с popup: { ..., open: false }. В приложении диспатчим акшон, который изменяет state и false меняется на true. Внутри можно сделать проверку if (this.props.popup.open) { popup = (markup) } . Если в state true, то в переменной находится какой-то маркап, иначе она пустая. Метод render() будет возвращать что-то вроде { popup }

[Risent Veber]

Андрей: Используйте что-то типо однакратной обработки события для инициализации - например это api.jquery.com/one

Answer 2

[Itvanya]

Странная проблема.. React - это view, а весь state мы храним, используя Flux-архитектуру (redux, в данном случае). На уровне app пишем редьюсер, который отвечает за активность модального окна. Если окно активно - рендерим его. Повтовюсь, в реакте на уровне всего приложения мы никогда не делаем подобных хаков, которые написаны выше, а вместо весь state храним в redux store. Это, действительно, удобно для независимых операций. А если пытаться сотворить такое на уровне компонентов, то проще не использовать реакт.

Answer 3

[Faliah]

Сначала мне показалось, что это извращение - использовать Реакт, вместо шаблонизатора, как из пушки по воробьям.
Но, в самом использовании по-моему нет ничего особенного - вот тут собрал вам демку

Вкратце:

• Реакт не будет остлеживать состояние глобальных переменных и перерисовывать компонент при их изменении
  
• Вместо этого вам нужно воспользоваться lifecycle хуками и, как предлагал коллега выше, внутри этого метода пробросить нужные методы для управления состоянием компонента наружу, хоть в тот же widnow
  
• Это позволит вам импользовать одни и те же методы как в дочерних компонентах: обработка клика по оверлею или по кнопке в модальном окне, так и во внешних, по отношению к контексту Реакта, DOM элементах, или, возможно, в каких-то еще бибилиотеках, JQuery и прочих
  

Если использовать мой компонент, то нужно немного изменить ваш код:

...
  this.on('showModal', function (data) {
    if (!window.modalAttached) {
      ReactDOM.render(
        <ModalWindow data={data} />,
        this.el
      )
    }      
    window.toggleModal();
  }
...

Comments

[Aves]

Загрязнять глобальную область плохо. У автора вопроса вариант с инстансом компонента лучше.

[Faliah]

Aves: Объявление var modal; это и есть глобальная переменная, в которой потом сохраняется ссылка на иснтанс компонента, затем props меняются напрямую и это боль. Или вы говорите о другом коде?

[Aves]

Faliah: с учетом того что var modal рядом с this.on... вряд ли это глобальная область видимости. В любом случае, инстанс можно сохранить и так и так. А вот сохранение в window изнутри компонента однозначно антипаттерн. Что если нужно будет сделать больше одного инстанса?
Изменение props это уже другой вопрос. Оно вообще работать не будет, потому что свойства props не перезаписываемые. Вообще props предназначены в первую очередь для передачи данных из вышестоящего компонента или при инициализации, а для собственных изменяемых данных больше подходит state. Я бы сделал примерно так.

[Faliah]

Aves: Я не говорю, что глобальная переменная это хорошо и полностью согласен с тем, что это антипаттерн. Но вопрос ведь не в этом. Ваш метод тоже хорош. Но при создании большого количества инстансов единственным плюсом этого подхода (по сравнению с глобальным хранением ссылок на иснтансы или флагов) будет как раз изоляция этих ссылок внутри замыкания. Память будет одинаково израсходована в обоих случаях и GC не сможет ее вернуть до тех пор, пока будут привязаны обработчики. Если уж совсем серьезно говорить об этом. Но Ваш вариант действительно выглядит лучше.