模态不显示使用钩子的 Reactjs

Question

我正在使用反应钩子和反应门户来创建和显示模态。 这是我的代码

Modal.tsx

const modalRoot = document.getElementById('modal');
const Modal: React.FC<Props> = memo(({isOpen, toggle, children}) => {
    const el = document.createElement('div');

    useEffect(() => {
        modalRoot.appendChild(el);

        return (() => {
            modalRoot.removeChild(el);
        })
    });

    return (
        isOpen ? createPortal(
            <React.Fragment>
                <div className="modal fade">
                    <div className="modal-dialog" role="document"
                         style={{width: "700px"}}>
                        {children}
                    </div>
                </div>
            </React.Fragment>, el
        ) : null
    )
});

useModal.tsx

const useModal = () => {
    const [isOpen, setIsShowing] = useState(false);

    const toggle = () => {
        setIsShowing(!isOpen);
    };

    return [
        isOpen,
        toggle,
    ]
};

使用

const [isModalOpen, toggleModal] = useModal();
    <Modal isOpen={isModalOpen} toggle={toggleModal}>
        <h1>test</h1>
        <p>Other text that describes what is happening</p>
        <button onClick={() => toggleModal(false)}>toggle</button>
    </Modal>

                        <div className="col-lg-2 pull-right">
                            <div className="pull-right">
                                <button type="button"
                                    // @ts-ignore
                                        onClick={() => toggleModal(!isModalOpen)}
                                        className="btn btn-primary btn-outline"><i
                                    className="ti-plus"/>
                                </button>
                            </div>
                        </div>

但是当我点击这个按钮时。 它没有显示我的模态。 当我按 f12 并检查 dom 时。 我看到模态渲染。 请帮我

Answer 1

我尝试在 Codesandbox 上运行你的代码，它对我来说正常工作。 这是链接： https : //codesandbox.io/s/sharp-dust-oyz0c

尽管我怀疑您可能因为样式而看不到模态。 Note ，模态在 className 中fade 。 尝试检查样式或创建具有所有必要样式的代码和框，以便易于调试。

希望这可以帮助！