У меня есть внешний узел DOM, в котором я отображаю некоторый динамический контент.Этот DOM-узел должен всегда присутствовать на странице.У меня также есть компонент MyComponent, который монтируется / демонтируется в разное время.Когда компонент смонтирован, я хочу, чтобы его метод рендеринга отображал существующий #data div, а когда он отключен, он должен вернуть div.
class MyComponent extends React.Component {
componentWillMount() {
// Maybe somehow move the `#data` div inside this compoennt
}
componentWillUnmount() {
// Maybe move the `#data` div back at the end of the </body> tag.
}
render() {
// Here it should just return the existing `#data` div
}
}
MyComponent не смонтирован:
<body>
<div id="app-root"></div>
<div id="data"></div> // has display: none while not used
</body>
Установлен MyComponent:
<body>
<div id="app-root">
// React stuff
<my-component>
<div id="data"></div>
</my-component>
</div>
</body>
Возможно ли это (сделать простой HTML-узел внутри компонента React)?
Есть ли лучшее решениедля моей проблемы (есть div, который всегда находится на странице, display: none;, но когда компонент смонтирован, отобразите его внутри этого компонента)?
Я использую это для отображения объявлений Google, поэтому у меня есть adDisplayContainerэто должно присутствовать всегда (и использоваться повторно), но я хочу показывать его только при показе определенного компонента (и он должен быть внутри этого компонента).