خطأ Uncaught Error: Invariant Violation في react

Adam Ebrahim · 2 مارس 2021

حاولت تطبيق مثال بسيط للغاية من موقع رياكت الرسمي، وظهر لي الخطأ التالي

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

بالرغم من أن الكود بسيط للغاية إلا أنني لا أفهم رسالة الخطأ أو سببها، هذا الكود الخاص برياكت (المثال):

<!doctype html>
<html>
  <head>
    <title>Example</title>
    <script>
var React = require('react');

var App = React.createClass({
  render() {
    return <h1>Hello, World!</h1>;
  }
});

React.renderComponent(<App />, document.body);
    </script>
  </head>
  <body>
    body content
  </body>
</html>

أرجو المساعدة في حل هذا الخطأ أو شرح رسالة الخطأ نفسها.

تم التعديل في 2 مارس 2021 بواسطة Adam Ebrahim

سامح أشرف · 2 مارس 2021

رسالة الخطأ تشير إلى أن العنصر المستخدم لعرض مكونات react غير موجود، وهذا لأن كود جافا سكريبت يتم تنفيذه قبل إنشاء العنصر body وبالتالي لا يجده. والحل هو إما وضع كل كود جافا سكريبت داخل حدث DOMContentLoaded أو الأفضل وهو نقل كل كود جافا سكريبت إلى نهاية عنصر body مع إستخدام عنصر div داخلي لعرض مكونات react بدلا من document.body

خطأ Uncaught Error: Invariant Violation في react

السؤال

Adam Ebrahim

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية