Как в React перерендерить компонент (popup), который вызывается функцией?

Question

[DarthJS]

С React пока на вы :)
Суть: есть приложение без Redux, обновление данных по WS
есть popup который создается в функции и получается пропс.
как-то так:

class RootComponent extends Component {
openPopup =() => {
<Popup list={this.props.list} />
}

render () {

 return () {
  // bla bla
  // bla bla
  <SomeComponent onClick={() => {this.openPopup}}
 }
}
}

В попапе выводится список данных и при колике на эелемент отправляется запрос.
WS присылает новые данные RootComponent перерисовуется, НО Popup нет. Я так понимаю, из-за того что вызвали его функцией и он не перерендеривается.
Как быть, подскажите?

Answer 1

[Максим]

Один из вариантов:
Вам нужно отрисовать компонент Popup внутри вашего родителя, и у Попапа сделать атрибут isVisible, который менять в state родителя.
Таким образом, когда придут новые данные вы можете просто setState вызвать и показать попап.

Comments

[DarthJS]

Спасибо.
Правда я забыл указать, что в функции есть фрапер, который отрисовывает Попап.
Я новый в React - хорошая ли является практика использовать темплейты либо возвращать компонеты в функциях,

[Максим]

DarthJS, по вашей задаче не понятно зачем вам рендерить "врапер, который отрисовывает Попап", возможно это какое-то лишнее усложнение.
Просто кладите в шаблоне компонента родителя, компонент Попапа и в него (как указал выше) передавайте атрибут (в рамках реакта - пропс: скрыт/показан). Возвращать компоненты в функциях вижу удобным в случае, когда вы, например, пробегаетесь map'ом по массиву и рендерите на основе каждого элемента какой-то компонент.
p.s. в любом случае, вам нужно как-то дополнить вопрос (что хотите сделать (без тех подробностей) и как делаете (включая функцию-враппер, если она еще останется), если мой ответ еще не прояснил ситуацию.

Answer 2

[davidnum95]

Ужас какой то. Что по вашему должна делать эта функция?

openPopup =() => {
<Popup list={this.props.list} />
}

Comments

[DarthJS]

пардон, я забыл упомянуть, есть кастомная утилита, которая создаёт враппер, компонент Popup это как Child для Попап враппера

[DarthJS]

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

[davidnum95]

DarthJS, я же задал вам конкретный вопрос

[DarthJS]

она открывает попап, едиснтвенное, а запыл упомянуть, что вокруг Popup, есть враппер дла попапов, который внедряет их в корень. Типа попап открывается нормально, просто не пойму как прокинуть туда пропсы, если он уже открыт. Пардон за немного не достоверную инфу