当我点击一个按钮来显示模式渲染时，我很难获得它
当点击开始编码按钮时，我们通过触发切换开始：
Start Coding
</button>
<StartModal
isShowing={isShowing}
hide={toggle}
/>
切换是从useModal((传下来的
const { isShowing, toggle } = useModal();
userModal将isShowing的状态更改为true/false
import { useState } from 'react';
const useModal = () => {
const[isShowing, setIsShowing] = useState(false);
function toggle() {
console.log('toggle is being triggered')
setIsShowing(!isShowing);
}
return {
isShowing,
toggle,
};
};
export default useModal;
此时toggle is being triggered是控制台记录的
StartModal应可见：
import React from "react";
import "../../assets/scss/modal.scss"
import ReactDOM from 'react-dom';
const StartModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
<>
<div className="md-modal md-effect-12">
<div className="md-content">
<h3>Ready to start programming?</h3>
<div>
<p>The session will be split into 5 phases:</p>
<ul>
<li>Introductions</li>
<li>Pseudo-Code</li>
<li>Time to Code</li>
<li>Solution</li>
<li>Rating</li>
</ul>
<button
className="md-close"
onClick={hide}
>Close</button>
</div>
</div>
</div>
<div className="md-overlay"></div>
</>, document.body
) : null;
export default StartModal;
当我单击"开始编码"按钮时，我的模态将显示在HTML中。当我在浏览器上检查Elements选项卡时，我看到模式显示，但在屏幕上看不到它。我不认为这是css问题，因为我在父div上有一个z-index: 2000属性。似乎div出现在我的react组件之外？
我认为最好的方法是将其与新的div一起使用。
例如：
<body>
<div id="root"></div>
<div id="modal"></div>
</body>
所以你可以在这里查看：https://codesandbox.io/s/affectionate-banzai-xypu3i