Как размонтировать все компоненты корневого уровня в ReactJs
Есть ли способ получить все корневые элементы в React?
У меня есть ситуация, когда элементы создаются в корне через ReactDOM.render, однако они не размонтируются, когда мой компонент размонтируется.
Я хотел бы получить все элементы, кроме AppContainer, а затем размонтировать их, когда мой компонент будет монтироваться. Возможно ли это?
Я добавляю настраиваемые компоненты реакции в таблицу данных, меня смущает, почему они входят в корень, поскольку они должны входить в td.
как в этом примере ... stackoverflow.com/a/44204235/3284707
Вам нужно отслеживать их и размонтировать вручную с помощью unmountComponentAtNode, когда они должны быть размонтированы. Я не могу сказать, как это делать в вашем случае, потому что вы не показали свой собственный код. Вопрос, который вы связали, использует jQuery, а вы, скорее всего, нет. MCVE является требованием для вопросов SO, потому что даже если вы думаете, что ваш случай такой же, как и в другом вопросе, он может отличаться.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
корневые компоненты, отображаемые с помощью ReactDOM, не знают друг друга.
чтобы размонтировать компонент, которого нет в дереве размонтируемого компонента, вы можете сделать что-то в этом роде:
const App1Component = <div>app1</div>;
const app1 = document.getElementById("app1")
ReactDOM.render(<App1Component/>, app1);
export class AppContainer extends React.Component {
componentWillUnmount() {
// ummount other components not in this tree
if (app1)
ReactDOM.unmountComponentAtNode(app1);
}
}
По сути, всякий раз, когда ваш «основной» компонент размонтируется, вызывайте ReactDOM.unmountComponentAtNode с другими корневыми элементами DOM-узлами.
Спасибо за ваш ответ, я не уверен, как я могу это сделать, поскольку элементы создаются динамически при создании таблицы данных, согласно ссылке stackoverflow.com/a/44204235/3284707, поэтому у меня нет ссылки на td значения при отключении компонента?
ну, технически вы можете попробовать получить их ссылку с помощью getElementById. Лучшим способом было бы назначить ссылку на реакцию каждому узлу DOM корневого элемента.
Какая связь между AppContainer и другими компонентами? В вопросе отсутствует stackoverflow.com/help/mcve, который мог бы объяснить, что происходит.