createRoot

const root = createRoot(domNode, options?)

المرجع

createRoot(domNode, options?)

استدعِ createRoot لإنشاء نقطة بداية React لعرض المحتوى داخل عنصر DOM في المتصفح.

import { createRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

سيقوم React بإنشاء نقطة بداية لـ domNode، ويتولى إدارة العنصر DOM داخله. بعد إنشاء نقطة البداية، يتعين عليك استدعاء root.render لعرض مكون React داخله:

root.render(<App />);

يتم عادة إنشاء التطبيق بالكامل باستخدام React بنداء واحد فقط لـ createRoot لنقطة البداية. قد يحتوي الموقع الذي يستخدم React لأجزاء من الصفحة على عدد من نقاط البداية الفردية حسب الحاجة.

انظر المزيد من الأمثلة أدناه.

المعاملات

• domNode: عنصر DOM يقوم React بإنشاء نقطة بداية لهذا العنصر ويتيح لك استدعاء الدوال على نقطة البداية مثل render لعرض المحتوى المعروض بواسطة React.

• options اختياري: كائن يحتوي على خيارات لنقطة بداية React هذه.

  • onRecoverableError اختياري: استدعاء للتحكم عندما يقوم React بالتعافي تلقائيًا من الأخطاء.
  • identifierPrefix اختياري: بادئة نصيّة يستخدمها React للمعرفات الفريدة التي تنشأ عن طريق useId. مفيد لتجنب التعارض عند استخدام العديد من نقاط البداية في نفس الصفحة.

العائدات

يعيد createRoot كائنًا يحتوي على طريقتين: render و unmount.

ملاحظات

• إذا كان تطبيقك يتم عرضه من الخادم، فإن استخدام createRoot() غير مدعوم. استخدم hydrateRoot() بدلاً من ذلك.
• من المرجح أن لديك استدعاء واحد فقط لـ createRoot في تطبيقك. إذا كنت تستخدم إطار عمل، فقد يقوم هذا الإطار الاستدعاء بالنيابة عنك.
• عندما ترغب في عرض جزء من JSX في جزء آخر من شجرة DOM التي ليست طفلًا للمكون الخاص بك (على سبيل المثال، نافذة محادثة، أو توضيح Tooltip)، استخدم createPortal بدلاً من createRoot.