reactjs - لا يمكن تعيين معامل من النوع 'HTMLElement | null' إلى معامل من النوع 'Element'. النوع 'null' لا يمكن تعيينه إلى النوع 'Element'.ts(2345)

لدي index.html

<body>
    <div id="portal"></div>
    <div id="root"></div>
</body>

وترغب في استخدام المكون أدناه في div البوابة منفصل عن div الجذر،

import React from 'react';

const portalDiv = document.getElementById('portal');

function Portal1(props) {
  return ReactDOM.createPortal(
    <div>
      {props.children}
    <div/>, 
  portalDiv); //here
}

export default Portal1;

لكنني أحصل على هذا الخطأ، نوع المتغير 'HTMLElement | null' لا يمكن تعيينه للمعامل من نوع 'Element'. النوع 'null' لا يمكن تعيينه للنمط 'Element'.ts(2345) في VScode.

أنا أستخدم تايب سكريبت.

الإجابة رقم 1

لقد أجاب أشخاص آخرون أنه يجب عليك إضافة فحص للقيمة الفارغة، لكن TypeScript يحتوي أيضًا على تأكيد غير فارغ يمكنك استخدامه عندما تكون متأكدًا من أن القيمة لن تكون فارغة عن طريق إضافة عامل التشغيل ! في نهاية عبارتك:

const portalDiv = document.getElementById('your-element')!;

الإجابة رقم 2

لذا لا أعرف إذا كان لا يزال هناك أي شخص يواجه هذه المشكلة، لكن هناك حل أسهل وأكثر وضوحًا لهذه المشكلة. ببساطة أعلن عن عنصر النموذج باستخدام كلمة "as"
const modalRoot=document.getElementById("modal-root") as HTMLElement; هذا يزيل الخطأ. أقترح الاطلاع على هذه الورقة المرجعية الرائعة لـ React-Typescript.
https://github.com/typescript-cheatsheets/react

الإجابة رقم 3

عندما نحدد عنصر HTML داخل شجرة DOM باستخدام getElementById فإنه يُرجع العنصر داخل المستند الذي يطابق المحدد المحدد، وإذا لم يتم العثور على تطابق فإنه يعود أساسًا بالقيمة null.

لنحصل على عنصر البوابة:

let portalDiv = document.getElementById("portal");

إذا كان البوابة موجودة في شجرة DOM، فستعيد HTMLElemnt وفي حالة عدم العثور عليها، فإنها تعيد null.

لذلك نوع الإرجاع لـ getElementById هو HTMLElement | null، وبما أن الوسيط الثاني في ReactDom.createPrortal(children: ReactNode, element: HTMLElement, id: string) هو HTMLElement بشكل صارم، فعلينا تحويـل portalDiv إلى HTMLElement للتخلص من التحذير.

نظرًا لأننا متأكدون من أن portalDiv موجود، يمكننا استخدام هذه الطريقة للتعامل مع الحالات null.

let portalDiv = getElementById("portal") as HTMLElement;

الآن يمكننا استخدام portalDiv دون الحصول على أي أخطاء:

function Portal1(props) {
  return ReactDOM.createPortal(
    <div>
      {props.children}
    <div/>, 
  portalDiv);
}

الإجابة رقم 4

نظرًا لأن getElementById قد تُرجع null، لذا فقط تحقق ببساطة قبل الاستخدام كما يلي:

function Portal1({ children }) {
  return portalDiv ? ReactDOM.createPortal(<>{children}</>, portalDiv) : null;
}