Material-ui: واجهة المستخدم المادية غير متوافقة مع React 0.14

tleunen أنت على الكرة! تم إصدار React 0.14 beta اليوم.

@ hai-cea لقد ألقيت نظرة على بعض المشكلات (وجدت حوالي 50 عبر 21 ملفًا). قد تكون هذه فرصة جيدة لتحقيق معلم هام. كنت أنظر إلى ملفات الحوار / الحوار-النافذة / التراكب وهناك الكثير من الاقتران عبر this.refs.xxx.yyy () لذلك قد لا تكون هذه مهمة بسيطة. إذا كنت ترغب في عمل معلم رئيسي لتوافق React 0.14 ، فأعلمني بذلك ويمكنني المساعدة في كتابة المشكلات (أنا متأكد من أن

شكرا يا رفاقتلونين!

أوافق ، هذا سوف يسبب بعض المشاكل. ما البديل؟ حفظ العنصر في متغير داخل تصيير؟

jkruder هل أنت على https://gitter.im/callemall/material-ui ؟ الرجاء إرسال رسالة فورية إليّ هناك وسنقوم بتدوير الأمور بشأن مسائل التنظيم / المعالم.

في معظم الأحيان ، لا ينبغي أن يكون للمكونات وظائف عامة. يجب تمرير كل شيء بالدعائم أو عند تركيبها.

على سبيل المثال ، لا يحتاج مكوّن الحوار إلى show و hide . إذا كان في دوم ، فسيتم عرضه ، وإلا فهو ليس كذلك.

لقد بدأت للتو في استخدام Material-UI ، لذا فأنا لست على دراية كبيرة بالمشكلات المتعلقة بالمكونات الأخرى ، لكنني أعتقد أنه يمكن إعادة كتابة معظمها بحيث لا يكون لها وظائف عامة (على أي حال ، لا توجد خيارات أخرى)
الشيء هو أنه سيكون تغييرًا كبيرًا عن الإصدار الحالي.

tleunen لا يمكنني الموافقة أكثر على طرق إظهار وإخفاء الحوار.

tleunenoliviertassinari نعم ، أتفق

الآن سيكون الحل الأوسط هو إضافة خاصية onClickAway إلى مربع الحوار والسماح لمستخدم المكون بفتح / إغلاق.

@ hai-cea أود أن أقترح استخدام نفس الموافقة مثل https://github.com/rackt/react-modal. هذا هو الحل الأوسط الخاص بك.

ما الشيء الآخر الذي تستخدمه هذه المكتبة this.refs عند التفاعل مع مكون DOM بدلاً من قول getDOMNode() ؟ ينطبق هذا التغيير في React فقط على مكونات مثل <div/> و <i/> أليس كذلك؟ لا يزال من الممكن الوصول إلى مكوناتك المخصصة بواسطة this.refs.xxx كالمعتاد. صححني إذا كنت مخطئًا ، فأنا لم أجرب React 0.14 حتى الآن ، ولكن هذا الشيء نفسه ظهر على HackerNews.

هل تقصد أنه إذا اكتشف React أن المرجع موجود على مكون مخصص ، فسوف يعيد المكون بدلاً من عنصر DOM داخل المكون؟

tleunen هذا ما أفهمه. يحتاج إلى التحقق :)

mull سيكون ذلك لطيفًا جدًا إذا كان هذا هو الحال. :)

@ هاي-CEAmulltleunen فقط ركض اختبار سريع والمرجع على حسب الطلب (شيء الذي يمتد React.Component) العنصر (this.refs.customComponent) سيعود في اشارة الى رد فعل مكون NOT العقدة DOM الأساسية. إذا كان لديك مرجع لعقدة DOM (div / a / img / etc) ، فإن this.refs.domRef ستعيد العقدة.

@ hai-cea ومع ذلك ، ما زلت أعتقد أنه من الجيد الابتعاد عن طرق الاتصال في هذا .refs.XXX.

jkruder شكرًا ، سعيد لأنني لم أتحدث عن ... :)

حسنًا ، شكرًا لإجراء البحثjkruder. أعتقد أننا وفرنا لإغلاق هذا. على الرغم من أنني أعتقد أننا ما زلنا بحاجة إلى تحقيق 0.14 علامة فارقة؟

أيضا ، ما رأيكم يا رفاق بشأن # 1033؟

أعتقد أنه يمكننا إغلاقها بعد ذلك. ولكن ينبغي أن يكون من الجيد إعادة كتابة بعض المكونات لإزالة الحاجة إلى استدعاء الدوال عليها. ليست الطريقة التي يجب أن تعمل بها المكونات: /

@ hai-cea متفق عليه. أنا أعمل على مسودة العمل المقترح لـ 0.14 معلم سأرسلها إليك للتعليق.

فيما يتعلق بالرقم 1033 # ، لا أعتقد أنه يجب علينا القيام بالقفزة الآن. أنا جميعًا من أجل إنشاء فرع منفصل حيث يمكننا تحويل MUI بحيث يكون متوافقًا مع ما هو مقترح لـ 0.14 وجعل المكونات أكثر فاعلية (قلل / احذف this.refs.XXX.YYY ()).

إذا كان الاستخدام الحالي لـ this.ref.xxx لا يكسر فعليًا واجهة المستخدم المادية عند استخدامها مع رد فعل 0.14.0-beta1 ، فأنا لا أشعر بالرغبة في الابتعاد عن هذا النمط يجب أن يحجب رقم 1033. من خلال تسهيل تثبيت واجهة المستخدم المادية جنبًا إلى جنب مع رد فعل 0.14.0-beta1 ، ستجهز نفسك لتلقي ملاحظات مبكرة حول المشكلات الفعلية التي قد تنشأ ؛ من الأفضل تلقي هذه التعليقات عندما يكون 0.14 في مرحلة تجريبية.

ربما يكون البديل الجيد (الذي يدير التوقعات بشكل أفضل) هو إصدار نسخة alpha / beta / rc من material-ui على npm التي تحتوي على 0.14.0 كاعتماد على الأقران (وهي موجهة نحو جعل مادة واجهة المستخدم 0.14 متوافقة). بهذه الطريقة يسهل على الأشخاص المضي قدمًا والعثور على / إصلاح أي مشكلات قد تكون موجودة.

jkruder أي تحديث على هذا؟

ashtonwar لا شيء حتى الآن - كنت أركز على إجراء بعض الاختبارات وحل بعض الالتزامات الخارجية. يجب أن يكون لدي بعض الوقت هذا الأسبوع لإلقاء نظرة عليه ومعرفة ما نعمل معه. قام البعض الآخر بالفعل ببعض المحاولات للهجرة إلى 0.14.

في صحتك للنظر إلى هذا. لقد رأيت material-ui-io من # 1033. يبدو أنه يعمل مع بعض المكونات (القوائم المنسدلة ، والأزرار ، وشريط الوجبات الخفيفة) ولكنه يسقط ويموت على الآخرين (مربع الاختيار ، شريط التمرير ، التبديل). ليس على علم بأي محاولات أخرى للهجرة.

tleunen اتضح أنه لا يزال بإمكاننا استخدام this.refs.XXX للمكوّن المخصص. شكرا jkruder .

ليس هناك أى مشكلة؛ ما زلت أعتقد أنه من الأفضل تجنب استخدام this.refs.doSomething() حيثما أمكن ذلك.

أي تحديثات؟ لقد تم إطلاق React JS 0.14 RC 1 للتو وترغب حقًا في استخدام Material-UI معها.

نفس الشيء هنا ، هل هناك طريقة يمكننا من خلالها دعم الهجرة إلى 14؟

أنا أستخدم material-ui-io في الإنتاج - يبدو جيدًا.

لذا فأنا الشخص الذي نشر مادة Ui-io وكانت محاولة قاسية ومحزنة للغاية للتنقل على واجهة المستخدم المادية.

أوصي بشدة بعدم استخدام هذه المكتبة في الإنتاج ! لقد صنعت المنفذ ونشرته في يوم واحد لاختبار واجهة المستخدم المادية ، ولكن انتهى بي الأمر بالتبديل لإنشاء مكتبتي الخاصة فوق mdl

أود أن أقول إن أفضل طريقة يمكن أن نساعد بها جميعًا في فحص واجهة المستخدم المادية في React 14 هي الترقية إلى React 14-rc1 والإبلاغ عن المشكلات التي تنشأ بشكل فردي. قد يكون بدء عنوان المشكلة بـ "React 14-rc1: حدث هذا الخطأ المحدد ...." أو مجرد ترك المشكلة بتسمية مناسبة فكرة جيدة.

لكن ربما لا ، وفي هذه الحالة آمل أن يصححني المشرفون الرئيسيون

https://github.com/callemall/material-ui/pull/1647

قد تحتاج إلى بعض اللمسات الأخيرة بخصوص peer-deps vs dev-deps vs deps وهناك مشكلة في أحداث اللمس معلقة.

في React 0.14 onTouchCancel و onTouchEnd و onTouchMove و onTouchStart يعمل تلقائيًا ، راجع https://facebook.github.io/react/blog/#breaking -changes.
لتمكين onTouchTap بدون رد فعل-اضغط-حدث-البرنامج المساعد:

import EventPluginHub from 'react/lib/EventPluginHub';
import TapEventPlugin from 'react/lib/TapEventPlugin';
EventPluginHub.injection.injectEventPluginsByName({ TapEventPlugin });

هل لا يزال لدينا تأخير 300 مللي ثانية في iOS Safari؟

ليس لدي IOS ...
ولكن في المنشور الأول هنا https://github.com/facebook/react/issues/436 ، يُقترح حقن TapEventPlugin كحل.
إلى جانب ذلك هنا https://github.com/facebook/react/commit/ff12423d639413c1934dfc2ff337b298952e99ef لقد وجدت الالتزام ذي الصلة.

هل هناك أي جدول زمني مؤقت لدعم React 14 ؟؟ هذه المشكلة قديمة حقًا وسيكون من الرائع حلها قريبًا!

أنا أيضًا متحمس جدًا لاستخدام مجموعة أدوات واجهة المستخدم هذه وتجنب Bootstrap و Foundation وحتى Elemental UI ... لكنني أستخدم React 0.14 مع Redux ولن أعود إلى 0.13. كم من الوقت قبل التحديث؟

أيضًا ، لست متأكدًا من أهليتي لطلب / تقديم هذه المعلومات ، ولكن فيما يتعلق بالمراجع ، (أيضًا لست متأكدًا مما إذا كان هذا هو 0.14 شيء .. أو 0.12 / 0.13) عادةً ما أضيف هذا إلى عناصر إدخال النموذج الخاص بي:

في كود onclick الخاص بي (أو أي معالج آخر) ، يمكنني الوصول إلى القيمة عبر this.name.value. يجعل من السهل جدًا الحصول على أي من قيم الإدخال. هل هناك احتمال أن هذا هو كل ما هو مطلوب لتحديث مجموعة الأدوات مع المرجع العامل؟

+1 على هذا. تم العثور على واجهة المستخدم المادية اليوم وكنت متحمسًا جدًا لتجربتها! لسوء الحظ ، لا يوجد نرد.

+1. أود أيضًا معرفة الجدول الزمني لهذا التحديث!

: +1:

نحن نصل إلى هناك يا رفاق! انظر # 1751. في هذه المرحلة ، هناك حاجة إلى مزيد من العمل للترقية إلى واجهة برمجة التطبيقات الجديدة react-router .

أوصي بتجربة الفرع react-0.14-support والإبلاغ عن أي مشكلات ببادئة [React0.14] في العنوان. بمجرد أن نتمكن من تشغيل هذا الفرع بالكامل ، سأغلق هذه المشكلة (أخيرًا!) :)

عظيم أن نسمع! نتطلع إلى النسخة النهائية. لقد كنت أعمل مع
Redux ، و React ، و React-router ، وحتى الآن هي طريقة رائعة جدًا. نظرة
إلى دمج واجهة المستخدم المادية في هذا.

يوم الثلاثاء ، 29 سبتمبر 2015 الساعة 1:31 مساءً ، Shaurya Arora [email protected]
كتب:

نحن نصل إلى هناك يا رفاق! انظر # 1751
https://github.com/callemall/material-ui/pull/1751. عند هذه النقطة
هناك حاجة إلى المزيد من العمل للترقية إلى واجهة برمجة تطبيقات جهاز التوجيه الجديد.

أوصي بتجربة فرع دعم رد فعل-0.14- وإعداد التقارير
أية مشكلات بالبادئة [React0.14] في العنوان

-
قم بالرد على هذا البريد الإلكتروني مباشرةً أو قم بعرضه على GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -144183104
.

رائع! سأطرح القضايا إذا كان هناك أي شيء ...

هل من أخبار عن تاريخ إصدار دعم React 0.14؟

amagdas هل أنت على علم react-0.14-support ؟ إنه جهد مستمر. لا تتردد في اختباره والإبلاغ عن أي مشاكل في البادئة [React0.14]

@ shaurya947 نعم ، أنا على علم بذلك ، لكنني غير قادر على تثبيت الفرع باستخدام npm ، حاول مرة أخرى.
سيكون من الجيد وجود نوع من المستند التمهيدي / wiki حول كيفية اختبار هذا الفرع باستخدام رد فعل 0.14.

يمكنك إما npm link من نسخة أو القيام بـ npm i 'git://github.com/callemall/material-ui#react-0.14-support' في مشروعك.

لتوضيح الأمر ، عليك إجراء تثبيت npm في دليل node_modules
ليس جذر الدليل الخاص بك
في 2 أكتوبر 2015 08:01 ، كتب "Chia-liang Kao" [email protected] :

يمكنك إما ربط npm من نسخة أو القيام بـ npm i 'git: //
github.com/callemall/material-ui#react-0.14-support "في مشروعك.

-
قم بالرد على هذا البريد الإلكتروني مباشرةً أو قم بعرضه على GitHub
https://github.com/callemall/material-ui/issues/1030#issuecomment -145051787
.

amagdas هذا الفرع لم يتم تشغيله في npm حتى الآن لأنه لا يزال لديه بعض المشكلات وهو عمل قيد التقدم.

يمكنك إما أن تفعل ما قاله clkao ، أو بعد استنساخ المستودع على جهازك ، قم بالتبديل إلى الفرع react-0.14-support باستخدام git checkout react-0.14-support .

بعد ذلك ، عند تشغيل npm i في الدليل الجذر ، يتم تجميع جميع ملفات المصدر في المجلد lib . يمكنك بعد ذلك استخدام مجلد lib هذا في مشروعك.

نعم ، لقد فعلت هذا وهي تعمل ، ستقدم ملاحظاتك.

ماذا عن الاستفادة من أداة FB هذه لإجراء التغييرات تلقائيًا؟ https://github.com/facebook/react/blob/master/packages/react-codemod/README.md

انظر إلى "إصلاحات الأخطاء الملحوظة" في رد الفعل 0.14 إعلان (http://facebook.github.io/react/blog/2015/10/07/react-v0.14.html):
"تتم معالجة أحداث النقر بواسطة React DOM بشكل أكثر موثوقية في متصفحات الجوال ، خاصة في Mobile Safari."
...

kinolaev لمزيد من التفاصيل: https://github.com/callemall/material-ui/pull/1732#issuecomment -143478944

هل تمت إزالة react-0.14-support ؟

ovaris لقد تم

oliviertassinari متى سيكون متاحًا في npm؟

متى سيكون متاحًا في npm

ليس لدي أي فكرة متى سيكون لدينا إصدار مجاني من الأخطاء. ومع ذلك يمكنك تجربة الفرع الرئيسي باستخدام npm.

يجب إصلاحه بأحدث إصدار v0.13.0
شكرا evreybody لمساعدتكم.

oliviertassinari شكرا!

شكرا لك!

أي أفكار إذا كانت هذه المشكلة ستظل موجودة في أحدث إصدار من واجهة المستخدم المادية؟ يمكنني استخدام معظم المكونات باستثناء تلك التي تستخدم this.refs.xxx.على سبيل المثال ، إذا حاولت استخدام مكون DatePicker ، يظهر لي خطأ "لا يمكن قراءة الخاصية 'show' of undefined" وغير معرف هنا هو this.refs.dialogWindow.

أنا على رد فعل 0.14.8 و مادة واجهة المستخدم 0.14.4 ...

نفس الخطأ

يبدو أن واجهة المستخدم المادية لا تعمل مع React 0.14.8 و 0.14.9 وهذا مثير للشفقة.
حزمة Webpack تصدر الكثير من الشكاوى الغريبة على وحدة التحكم الخاصة بي. لا أفهم ماذا تفعل.

@ topgun743 من المؤلم جدًا أن تصف العمل الممتاز هنا (المقدم مجانًا ) بأنه مثير للشفقة.

ومنذ فتح هذه القضية تتفاعل صدر 15، والذي المواد واجهة المستخدم متوافق مع. أقترح ترقية React داخل مشروعك.