Javascript 模态不使用hook显示Reactjs

我正在使用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
    )
});

使用

const[isModalOpen，toggleModal]=useModal（）；
测试
描述正在发生的事情的其他文本

toggleModal（false）}>切换
toggleModal（！isModalOpen）}
className=“btn btn主btn大纲”>

---

但是当我点击这个按钮。它没有显示我的模态。当我按下f12键并检查dom时。我明白了。请帮助我

我尝试在Codesandbox上运行您的代码，它对我正常工作。以下是链接：

虽然我怀疑你可能不会看到模态，因为造型<代码>注意模式在类名称中有

淡入

。尝试检查样式或创建一个包含所有必要样式的codesandbox，以便易于调试

---

希望这有帮助

您能否在堆栈片段上或使用堆栈片段创建一个可复制的示例？通过快速调试，它将有助于回答问题。感谢您的帮助。我发现className模式和引导中的className是相同的。更改类名使其工作

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>