Question

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

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。尝试检查样式或创建具有所有必要样式的codeandbox，以便易于调试。

希望这会有所帮助！

模态不显示使用钩子的Reactjs

1 个答案: