Как демонтировать компонент после его скрытия?

Question

[AnotherUniverse]

Доброго времени суток.

Имеем примерно следующее:

class SuperComponent extends React.Component {
constructor(props) {
super(props);

this.state = {
isShow: true
};
}

onClose = () => this.setState({isShow: false});

render() {
if (this.state.isShow === false) {
return null;
}

return (<div>
<p>Hello</p>
<button type="button" onClick={this.onClose}>Close</button>
</div>);
}
}

Когда мы возвращаем из рендера null, то компонент просто не отображается, но остаётся монтированным.
Могу ли я каким-либо образом не просто скрывать компонент, а именно демонтировать его?
Вариант явно демонтировать из вне через ReactDOM.unmountComponentAtNode() не подходит.

Спасибо.

Answer 1

[Антон Спирин]

Подъем состояния:

const Foo = () => {
  const [shouldShowBar, setShouldShowBar] = useState(true);

  const handleBarClose = useCallback(() => {
    setShouldShowBar(false);
  }, []);

  return (
    <>
      {shouldShowBar && <Bar onClose={handleBarClose} />}
    </>
  );
};

Если это простое модальное окно, которое надо показывать по клику и подобные окна планируется использовать во многих местах, то для удобства их использования можно реализовать обертку, в которой будет использоваться прием render-props:

const Foo = ({ onConfirm }) => {
  return (
    <ModalWrapper
      onConfirm={onConfirm}
      body="Hello"
    >
      {showModal => (
        <Button onClick={showModal}>Show modal</Button>
      )}
    </ModalWrapper>
  );
}

Это позволит не плодить во всех компонентах, где одни будут использоваться, логику их состояния.

Comments

[AnotherUniverse]

Спасибо.
Да, я так и делаю - поднимаю состояние и делаю отрисовку по условию.
Вопрос интересует больше в теории. Т.е. изолировать этот процесс в рамках самого компонента мы никак не можем? Имею ввиду, демонтировать компонент из самого компонента: не поднимая состояние, и не имея возможности применить unmountComponentAtNode, скажем, если мы не знаем заранее куда именно будет монтирован компонент?

[Антон Спирин]

AnotherUniverse, для чего вам размонтировать компонент из самого себя? Если это не root компонент приложения, то это невозможно.
Даже если бы вы попробовали, в таком случае, использовать unmountComponentAtNode, React бы все-равно не дал вам этого сделать. Он работает только с контейнером приложения/модуля и нужен только для кейсов, где есть необходимость в полном его размонтировании.
Пример:

import React from "react";
import ReactDOM from "react-dom";

const rootElement = document.getElementById("root");

const unmountApp = () => {
  ReactDOM.unmountComponentAtNode(rootElement);
};

const App = () => (
  <>
    <div>App</div>
    <button onClick={unmountApp}>Unmount App</button>
  </>
);

ReactDOM.render(<App />, rootElement);

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

[AnotherUniverse]

Ещё раз спасибо за ответы.
Повторюсь, вопрос был больше теоретический. Понятия не имею, где это может понадобиться :D, но разобраться хотелось.
В общем, можно считать вопрос закрытым.
Благодарю.