@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() не подходит.

Спасибо.
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Подъем состояния:
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>
  );
}

Это позволит не плодить во всех компонентах, где одни будут использоваться, логику их состояния.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы