Модальные окна. Куда и как рендерить?

Question

[rgs350]

Здравствуйте. Есть модальное окно (ну например с информацией о товаре) + несколько элементов управления (кнопки), при нажатии на которые должно отображаться это модальной окно. Куда рендерить модальное окно?
1. В каждой кнопке писать {this.state.isShowModal && <Modal/>}, но как-то глупо хардкодить его в каждом элементе управления.
2. Тоже самое в App, но тогда при открытии каждого окна будет реконсилироваться всё приложение.

Answer 1

[davidnum95]

Рендерить можно через портал в корне приложения, управлять состоянием через контекст. Получится что то типа:

<ModalContext.Consumer>
    {(showModal) => <button onClick={() => showModal(modalProps)}>Open Modal</button>}
</ModalContext.Consumer>

Answer 2

[Алексей Николаев]

Модальные окна необязательно должны отдавать в render что-то, кроме как null, когда они "закрыты". Поэтому рендерьте окна ближе к корню DOM-дерева приложения, они будут рендериться, но в render будет null, если isShowModal = false.

Comments

[rgs350]

Это пункт 2. И он приведет к реконсилированию всего приложения. Нет ли в react-е какого-нибудь нормального способа?

[Алексей Николаев]

rgs350, если все сделано нормально, то не приведет. Это нормальный способ

[rgs350]

Алексей Николаев,
Ну да.
1 - Замените ...extends Component... на ...extends PureComponent...
2 - Используюте redux для храниния состояния модальных окон.
3 - Использюте combineReducersдабы постоянный вызов mapStateToPropsне приводил к тормозам.
... Еще куча сомнительных штук вместо какого-нибудь, по непонятным причинам отсутствующего, getComponent('modal').showWithProps(props);
Вобщем пора react-ам, redux-ам и т.д. делать ребрендинг и менять логитип на:

Answer 3

[forspamonly2]

как раз для этого в реакте теперь есть порталы:
https://reactjs.org/docs/portals.html