我正在嘗試使用 NextJS 和 Typescript 在我的應用程式中構建模式，但我無法擺脫模式選擇器上的警告。如何正確輸入這個？
const Modal = ({ children }: ModalProps) => {
const [_document, setDocument] = useState<Document | null>(null);
useEffect(() => {
setDocument(document);
}, []);
if (_document) {
return ReactDOM.createPortal(
<div className={styles.wrapper}>{children}</div>,
_document.querySelector(_document.body)
);
} else {
return null;
}
};
uj5u.com熱心網友回復：
getElementById回傳一個可為空的值
getElementById(elementId: string): HTMLElement | null;
但ReactDOM.createPortal只接收不可為空的引數
您可以對自己的邏輯充滿信心，但 Typescript 不是，因此您需要將這些引數轉換為不可為空的型別以便理解
const Modal = ({ children }: ModalProps) => {
const [_document, setDocument] = useState<Document | null>(null);
useEffect(() => {
setDocument(document);
}, []);
if (_document) {
return ReactDOM.createPortal(
<div className={styles.wrapper}>{children}</div>,
_document.getElementById("modal") as HTMLElement
);
} else {
return null;
}
};
或者您可以使用非空斷言運算子
一個新的！后綴運算式運算子可用于在型別檢查器無法得出該事實的背景關系中斷言其運算元為非空且非未定義。
完整的變化可以是
const Modal = ({ children }: ModalProps) => {
const [_document, setDocument] = useState<Document | null>(null);
useEffect(() => {
setDocument(document);
}, []);
if (_document) {
return ReactDOM.createPortal(
<div className={styles.wrapper}>{children}</div>,
_document.getElementById("modal")! //notice `!` at the end of line
);
} else {
return null;
}
};
請注意，如果您的值在邏輯的某些部分未定義/為空，這些更改可能會導致錯誤/錯誤
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/451160.html