نموذج رمز لتنفيذ مكونات تأثير الكاروسيل باستخدام React

مقدمة

لقد وجدت أن React و AngularJs مختلفان تمامًا في تفكيرهما ، ويستند AngularJS إلى الربط ثنائي الاتجاه ، وتخصيص البيانات في الطبقة Modal ، ثم يتغير في كلا الاتجاهين. لكن رد الفعل يغير حالة طبقة العرض من خلال الدعامة والحالة. فيما يلي مكون صورة دائري كتبته ، يمكنك إلقاء نظرة عليه مباشرة. الكود بسيط للغاية. المبدأ هو تغيير نمط CSS setState عن طريق الرد بعد componentDidMount .

التفسير التالي: GIF عالق للغاية ، لكن التأثير الفعلي لا يزال جيدًا جدًا.

ما يلي هو رمز العينة

lunbo.js

 يتطلب ('الأنماط/app.css') ؛ طلب ('almitalize.css/almitalize.css') ؛ استيراد رد الفعل من 'React' ؛ استيراد ReactDom من 'React-dom'const lunbo = React.CreateClass ({propstypes: {steral: react.proptypes.number ، autoplay: react.propes. DefaultActactiveIndex: React.proptypes.bool ، defaultactactactiveIndex: React.proptypes.bool ، الاتجاه: React.propTypes.Oneof ['right' ، 'left'] ، number: react.proptypes.number ، boxstyle: react.proptypes.string ،} ، getdefuld () {return ( DefaultActiveIndex: 0 ، الاتجاه: 'right'}} ، getInitialState () {return {ActiveIndex: this.props.defaultactiveex؟ ComponentWillReceiveProps () {} ، componentWillunMount () {clearinterval (this.timeouter) ؛ if (this.props.direction === "left") this.setState ({ActiveIndex:} ، playleft (indexin) {let indexin؟ "القضية" ؛ OldIndex = this.props.ActionEx ؛ onClick = {this.left}> اليسار </span> <span className = "righticon" onClick = {this.right}> يمين </span> <ul className = {this.position ()}> {this.props.children} </ul> </viv>}}) ؛

index.js

 استيراد "core-js/fn/object/issign" ؛ استيراد رد فعل من "React" ؛ استيراد رد الفعل من "React-dom" ؛ استيراد lunbo من ". className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg؟imagemogr2/auto-orient/strip٪7cimageviewviewview2/2/w/1 className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg؟imagemogr2/auto-orient/strip٪7cimaviewviewviewviewviewview className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg؟imageMogr2/Auto-Orient/strip٪7cimageviewview2/2/w/120) </lire> li className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg؟imagemogr2/auto-orient/strip٪7cimageviewview2/2/w/1 ، document.getElementByid ('app')) ؛

app.css

 .Content {العرض: 400px ؛ الارتفاع: 400 بكسل ؛ الحدود: 3 بكسل Saddlebrown ؛ الموقف: قريب تجاوز: مخفي ؛}. المحتوى ul {display: block ؛ العرض: 2500px ؛ الارتفاع: 100 ٪ تعويم: اليسار. الموقف: مطلق ؛ z-index: 0 ؛ -بكيت ترانس: جميع 0.5s ؛ -انتقال الأوز: جميع 0.5s ؛ -MS الانتقال: جميع 0.5s ؛ -الران: جميع 0.5s ؛ الانتقال: All 0.5s ؛}. boxstyleli {display: inline block ؛ العرض: 400 بكسل ؛ الارتفاع: 400 بكسل ؛ تعويم: اليسار ؛}. boxstyleli img {width: 100 ٪ ؛ الارتفاع: 100 ٪ ؛}. spanstyle {width: 500px ؛ الارتفاع: 400 بكسل ؛ الحدود: 3px الصلبة #598b3a ؛ الخلفية: #7177EB ؛ الموضع: النسبية ؛}. OnePosition {يسار: 0 ؛}. الارتفاع: 50 بكسل ؛ الخلفية: #CD4D5C ؛ الموقف: مطلق ؛ اليسار: 0 ؛ أعلى: 350 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 50 بكسل ؛ z-index: 999 ؛}. righticon {width: 50px ؛ الارتفاع: 50 بكسل ؛ الخلفية: #F6403D ؛ الموقف: مطلق ؛ اليسار: 350 بكسل ؛ أعلى: 350 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 50 بكسل ؛ z-index: 999 ؛}

لخص

من خلال تعلم إطار React ، يمكنك اكتشاف عقلية جديدة من ميزاتها الجديدة الفريدة. ما سبق هو المحتوى الكامل لهذه المقالة. آمل أن يكون بعض المساعدة لدراسة أو عمل الجميع. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.