Material-ui: [عنصر القائمة] rightIconButton: خطأ في النمط مع مكون IconMenu المخصص
مرحبا،
بادئ ذي بدء ، شكرًا لك على العمل الرائع في هذه المكتبة ؛)
لدي العديد من أخطاء الموضع عند استخدام المكونات المخصصة إليك مثالاً على IconMenu مخصص مستخدم في ListItem.rightIconButton:
// With my custom component
<ListItem>
[...]
rightIconButton={<CustomComponentListMenu />}
/>
// CustomComponentListMenu.jsx
[...]
render() {
return (
<IconMenu iconButtonElement={this.iconButtonElement} >
<MenuItem onClick={this.onDelete}>Delete</MenuItem>
</IconMenu>
);
}
يعمل IconMenu جيدًا ، لكن موضع قائمة الرموز ليس جيدًا (انظر لقطة الشاشة المرفقة).
في الواقع ، أعتقد أن المشكلة تكمن في أن النمط (الموضع: مطلق ، اليمين: 4 ، أعلى: 12) يتم تطبيقه على علامة المكون المخصص الخاصة بي (<CustomComponentListMenu>) وليس علامة IconMenu (<IconMenu>).
راجع ListItem.js: 622 (https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L622) حيث _rightIconButtonElement_ هو عنصري المخصص وليس قائمة iconMenu.
أتفهم أنه ليس خطأ حقًا ، لكنه قيد خطير عند استخدام مكون مخصص (هذا هو بيت القصيد من React ، أليس كذلك؟).
لاحظ أن هذا "الخطأ" يظهر أيضًا مع مكونات أخرى ، مثل Avatar في ListItem.leftAvatar.
لقطة شاشة:
هل تعتقد أنه يمكننا إيجاد حل للسماح بمكوِّن مخصص؟
إصدارات
واجهة المستخدم المادية: 0.15.0
رد الفعل: 14.7
المتصفح: Chrome، Firefox
Colmea
ال 4 كومينتر
لقد مررت للتو بنفس السلوك الغريب. بعد البحث فيه ، يبدو أن الخاصية rightIconButton تريد عنصرًا وليس مكونًا. حاول تغيير rightIconButton={<CustomComponentListMenu />} إلى rightIconButton={(new CustomComponentListMenu).render()} . بالنسبة للمكونات الوظيفية عديمة الحالة ، جرب <Component /> -> Component() .
(لاحظ أن React.createElement(Component) لا يعمل ؛ لم أنظر في التفاصيل عن السبب)
لقد بدأت للتو في استخدام React ولا أعرف ما إذا كان هذا مقصودًا أم لا ، ولكن قد تكون هناك رسالة خطأ عند تعيين rightIconButton على مكون بدلاً من عنصر ، بدلاً من الفشل بهذه الطريقة المحيرة .
jlroettger
في ١٩ مايو ٢٠١٦
هل تقوم بتمرير ...props ؟ لدي نفس المشكلة مع Avatar. أعتقد أن MUI تحدد بعض الدعائم داخليًا.
يبدو مكوِّن الصورة الرمزية المخصص كما يلي:
...
const Avatar = (props) => {
const propsWithoutMember = { ...props };
delete propsWithoutMember.member;
return (
<MUIAvatar {...propsWithoutMember}>{getInitials(props.member)}</MUIAvatar>
);
};
...
اضطررت إلى إزالة نماذجي المخصصة قبل تمريرها ، وإلا فإن MUI ستشتكي من الدعائم غير المعروفة.
jonespen
في ٢٧ سبتمبر ٢٠١٦
نعم ، كان هذا مجرد خطأ في البداية مع رد فعل ، ولم يكن هناك حاجة إلا لتمرير ...props
jlroettger
في ٢٩ سبتمبر ٢٠١٦
لقد تم نقل المكون على فرع v1-beta . لقد أعدنا تنفيذه من الألف إلى الياء. على الرغم من أننا لم نختبرها ، أعتقد أنه من المرجح أن يتم إصلاح المشكلة في هذا الفرع. ومن ثم ، أقوم بإغلاقه.
ومع ذلك ، سنقبل إصلاحات العلاقات العامة حتى تتولى v1-beta الفرع الرئيسي.
oliviertassinari
في ٢٨ يوليو ٢٠١٧
القضايا ذات الصلة
iamzhouyi
·
3تعليقات
zabojad
·
3تعليقات
newoga
·
3تعليقات
TimoRuetten
·
3تعليقات
sys13
·
3تعليقات
التعليق الأكثر فائدة
لقد مررت للتو بنفس السلوك الغريب. بعد البحث فيه ، يبدو أن الخاصية
rightIconButtonتريد عنصرًا وليس مكونًا. حاول تغييرrightIconButton={<CustomComponentListMenu />}إلىrightIconButton={(new CustomComponentListMenu).render()}. بالنسبة للمكونات الوظيفية عديمة الحالة ، جرب<Component />->Component().(لاحظ أن
React.createElement(Component)لا يعمل ؛ لم أنظر في التفاصيل عن السبب)لقد بدأت للتو في استخدام React ولا أعرف ما إذا كان هذا مقصودًا أم لا ، ولكن قد تكون هناك رسالة خطأ عند تعيين
rightIconButtonعلى مكون بدلاً من عنصر ، بدلاً من الفشل بهذه الطريقة المحيرة .