React: إعادة عرض عنصر في componentDidMount مرة واحدة خطأ: لا يمكن قراءة الخاصية 'rootID' للقيمة null.

تم إنشاؤها على ١٠ مايو ٢٠١٦ · 3تعليقات · مصدر: facebook/react

أقوم بتطبيق ReactDOM.render #container element (المستوى الأعلى) في دالة componentDidMount ، وأظهر لي React بعض الأخطاء ، ولا يمكن قراءة الخاصية "rootID" للقيمة null .
إذا استخدمت setTimeout ، فقم بتشغيل ReactDOM.render ، فهذا يعمل. (حتى بعد 0 مللي ثانية)
أشعر بعدم اليقين ، هل يمكن لأحد أن يساعدني؟

لغة البرمجة:

<!DOCTYPE html>
<html>
<head>
    <title>React</title>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript" src="script/lib/react.js"></script>
    <script type="text/javascript" src="script/lib/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/javascript" src="script/bundle.js"></script>
</body>
</html>

أ. jsx و b. jsx:

var A = React.createClass({
    componentDidMount: function(){
        ReactDOM.render(
            <B />,
            document.getElementById('container')
        );
    },
    render: function(){
        return (
            <div>Hello World, I'm A.</div>
        )
    }
});

var B = React.createClass({
    render: function(){
        return (
            <div>Hello World, I'm B.</div>
        )
    }
});

app.jsx:

ReactDOM.render(
    <A />,
    document.getElementById('container')
);

مصدر

h1orz

التعليق الأكثر فائدة

السؤال الحقيقي هو لماذا تطلب ReactDOM.render من خلال طريقة دورة الحياة؟ أنت تحاول تركيب مكون جديد في العقدة التي تم تركيب المكون الحالي عليها ، والتي تبدو وكأنها نمط مضاد.

يجب عليك استخدام مكون أصل جذر لإدارة أي مكون يتم عرضه ، بدلاً من محاولة إعادة التحميل في الجذر. إذا كنت مضطرًا تمامًا إلى امتلاك عدة جذور لـ React (والتي يجب أن يكون لديك سبب وجيه حقًا) ، فيجب أن تستخدم نوعًا من النظام المساعد لإدارة هذا:

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

إذا كان لديك العديد من جذور React ، أو جذر واحد تم حذفه بمرور الوقت ، فننصحك دائمًا بإنشاء واجهة برمجة التطبيقات الخاصة بالغلاف. ستبدو جميعها مختلفة قليلاً اعتمادًا على شكل نظامك الخارجي. على سبيل المثال ، في Facebook لدينا نظام يرتبط تلقائيًا بجهاز توجيه انتقال الصفحة الخاص بنا للاتصال تلقائيًا بـ unmountComponentAtNode.

بدلاً من استدعاء ReactDOM.render () في كل مكان مباشرةً ، ضع في اعتبارك كتابة / استخدام مكتبة ستدير التثبيت والفك داخل التطبيق الخاص بك.

aweary في ١ يونيو ٢٠١٦

👍2 🎉1

ال 3 كومينتر

هل يمكنك إعادة إنتاج مشكلتك في jsfiddle؟ https://jsfiddle.net/L3zn8dws/

cpb في ١ يونيو ٢٠١٦

https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html#helpers

إذا كان لديك العديد من جذور React ، أو جذر واحد تم حذفه بمرور الوقت ، فننصحك دائمًا بإنشاء واجهة برمجة التطبيقات الخاصة بالغلاف. ستبدو جميعها مختلفة قليلاً اعتمادًا على شكل نظامك الخارجي. على سبيل المثال ، في Facebook لدينا نظام يرتبط تلقائيًا بجهاز توجيه انتقال الصفحة الخاص بنا للاتصال تلقائيًا بـ unmountComponentAtNode.

aweary في ١ يونيو ٢٠١٦

👍2 🎉1

يبدو هذا وكأنه نمط غير مدعوم: أنت تحاول عرض شيء ما في حاوية تحتوي بالفعل على مكون آخر يتم تنفيذ دورات حياته حاليًا.

إذا كنت تريد ظهور B ، فقم بتضمين <B /> من مخرجات تصيير A .