javascript - 模态不显示 Reactjs 使用 Hook

Question

我正在使用 React Hook 和 React Portal 来创建和显示模态。这是我的代码

模态.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

虽然我怀疑您可能因为样式而看不到模态。 注意 模态在 className 中有 fade。尝试检查样式或创建包含所有必要样式的代码和框，以便于调试。

希望这对您有所帮助!