React-devtools: أسماء المكونات مفقودة

حسنًا ، إليك تحديث سريع: إذا تم الكشف عن المكون مثل هذا ، فسيكون له Unknown كاسم:

exports.MyComponent = React.createClass({...});

ومع ذلك ، عندما أقوم بتغييره إلى هذا ، فإنه يبدأ في العمل:

var MyComponent = React.createClass({...});
exports.MyComponent = MyComponent;

لقد تحققت من كود مصدر الامتداد ، لكن لا يمكنني تحديد ما هو tagName وكيف تم تعيينه.

إذا كنت لا تستخدم JSX ، فأنت بحاجة إلى إضافة سمة displayName إلى فصلك الدراسي.

var MyComponent = React.createClass({
  displayName: 'MyComponent',
  ...
});

إذا كنت تستخدم JSX ، فسيتم ذلك تلقائيًا. لسوء الحظ ، لا توجد طريقة للحصول عليها بطريقة أخرى.

نعم ، أنا أستخدم JSX. لذا ، يبدو الأمر مختلفًا - لا يستطيع برنامج التحويل البرمجي JSX المساهمة displayName إذا تم التصريح عن المكون بـ exports.ComponentName = React.createClass() .

هذا هو الكود المسؤول عنه: https://github.com/facebook/react/blob/master/vendor/fbtransform/transforms/reactDisplayName.js#L37

يمكن لـ JSX من الناحية النظرية أن تدعم التنسيق الخاص بك أيضًا. تختفي هذه المشكلة عندما ننتقل إلى فصول ES6 أو شيء مشابه.

اسم العلامة هو جزء من مكونات DOM في قلب React. ليس لها اسم عرض.

إذا كنت ترغب في إرسال طلب سحب ، يمكنك إضافة التنسيقات المفضلة لديك هنا:

https://github.com/facebook/react/blob/ab47e992155ec9c2455b02bf671e8dd92bd01055/vendor/fbtransform/transforms/reactDisplayName.js#L37 -L51

فهم، وذلك بفضل. دليل displayName سيعمل الآن.

صنع للتو https://github.com/facebook/react/pull/799 والذي يجب أن يصلح هذا لجميع الحالات التي يمكنني التفكير فيها.

أنا أستخدم المكوِّن الإضافي chrome React Developer Tools وعندما أفحص شجرة React أرى "مكون الوكيل" بدلاً من الاسم الفعلي للمكونات. قد تكون مشكلة webpack ؟ حاولت إضافة "displayName" ولكن ذلك لم يفعل.

أي شخص آخر يعمل في هذه المسألة؟