Необходимо сделать что-то наподобие пользовательского хука(если подобное возможно), который возвращает массив, содержащий компонент модального окна и функцию, при вызове которой меняется режим отображения окна.
Пример логики представлен ниже, однако он абсолютно нерабочий, т.к. useEffect не может отслеживать изменение переменной замыкания.
Я бы хотел узнать, возможно ли сделать что-то похожее, чтобы можно было не нагромождать компонент, содержащий модальное окно, кучей ненужной логики. При этом загромождение rudux-хранилища ненужными локальными состояниями тоже является неприемлемым.
import React, { useEffect, useState } from "react";
import LoginForm from "../LoginForm";
import { Modal } from "antd";
export default () => {
let isVisible = true;
const toggleVisibleMode = () => {
isVisible = !isVisible;
}
const LoginModal = () => {
const [isLoginVisible, setLoginVisible] = useState();
useEffect(() => {
setLoginVisible(isVisible);
}, [isVisible]);
return (
<Modal
centered={true}
title={'Login'}
visible={isLoginVisible}
onCancel={() => setLoginVisible(false)}
footer={null}
>
<LoginForm />
</Modal>
);
}
return [
LoginModal,
toggleVisibleMode
];
}
useState
:const [isModalOpen, setIsModalOpen] = React.useState(false)