คำนำ
ฉันพบว่า React และ AngularJs นั้นแตกต่างกันอย่างสิ้นเชิงในการคิดของพวกเขา AngularJS นั้นขึ้นอยู่กับการเชื่อมโยงสองทางปรับแต่งข้อมูลในชั้น Modal แล้วเปลี่ยนทั้งสองทิศทาง แต่ปฏิกิริยาจะเปลี่ยนสถานะของเลเยอร์มุมมองผ่านเสาและสถานะ ด้านล่างเป็นองค์ประกอบรูปภาพม้าหมุนที่ฉันเขียนคุณสามารถดูได้โดยตรง รหัสนั้นง่ายมาก หลักการคือการเปลี่ยนสไตล์ CSS setState โดยการตอบสนองหลังจาก componentDidMount
คำอธิบายต่อไปนี้: GIF ติดอยู่มาก แต่เอฟเฟกต์ที่แท้จริงยังคงดีมาก
ต่อไปนี้เป็นรหัสตัวอย่าง
lunbo.js
ต้องการ ('styles/app.css'); ต้องการ ('normalize.css/normalize.css'); นำเข้าปฏิกิริยาจาก 'react'; นำเข้าปฏิกิริยาจาก 'React-Dom'Const lunbo = react.createclass ({propstypes: {interval: react.proptypes.number, autoplay DefaultActiveIndex: react.proptypes.bool, defaultActiveIndex: react.proptypes.bool, ทิศทาง: react.proptypes.oneof ['ขวา', 'ซ้าย'], จำนวน: react.proptypes.number, boxstyle: react.proptypes.string,}, getDefaultProps defaultActiveIndex: 0, ทิศทาง: 'Right'}}, getInitialState () {return {ActiveIndex: this.props.defaultactiveindex? ComponentWillReceiveProps () {}, ComponentWillunMount () {ClearInterval (this.timeouter); if (this.props.direction === "left") {this.timeouter = setInterval (this.playleft, this.props.interval); this.setState ({activeIndex: index})}, playleft (indexin) {ให้ดัชนี = indexin? indexin: this.state.activeIndex-1; "onepositions"; OldIndex = this.props.active INDEX; onclick = {this.left}> ซ้าย </span> <span className = "righticon" onClick = {this.right}> ขวา </span >< ul className = {this.position ()}> {this.props.children}index.js
นำเข้า 'core-js/fn/object/asy'; นำเข้าปฏิกิริยาจาก 'react'; นำเข้า Reactdom จาก 'react-dom'; นำเข้า Lunbo จาก './components/lunbo'; reactdom.render(<lunbo Interval = {100} number = {4} boxstyle = "เนื้อหา" classname = "Boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6D38B15221A904C9.JPG classname = "Boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagemogr2/auto-orient/strip%7cimageView2 classname = "Boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158B127A710879A.JPG classname = "Boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-2C8D6D5D8D3B59BC.JPG , document.getElementById ('แอป'));app.css
.Content {width: 400px; ความสูง: 400px; ชายแดน: 3px Siddlebrown ของแข็ง; ตำแหน่ง: ญาติ; ล้น: ซ่อน;} เนื้อหา ul {display: block; ความกว้าง: 2500px; ความสูง: 100%; ลอย: ซ้าย; ตำแหน่ง: สัมบูรณ์; z-index: 0; -webkit-transition: 0.5s ทั้งหมด; -MOZ-TRANSITION: 0.5S ทั้งหมด; -ms-transition: 0.5s ทั้งหมด; -O-Transition: 0.5s ทั้งหมด; การเปลี่ยนแปลง: 0.5s ทั้งหมด;}. Boxstyleli {display: inline-block; ความกว้าง: 400px; ความสูง: 400px; Float: ซ้าย;}. Boxstyleli img {width: 100%; ความสูง: 100%;}. Spanstyle {Width: 500px; ความสูง: 400px; ชายแดน: 3PX Solid #598B3A; ความเป็นมา: #7177EB; ตำแหน่ง: สัมพัทธ์;}. onePosition {ซ้าย: 0;}. twoposition {ซ้าย: -400px;}. มีการวางตำแหน่ง {ซ้าย: -800px;}. fourposition {ซ้าย: -1200px;}. levingicon {width: 50px; ความสูง: 50px; ความเป็นมา: #CD4D5C; ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 350px; TEXT-ALIGN: CENTER; ระดับความสูง: 50px; z-index: 999;}. righticon {width: 50px; ความสูง: 50px; ความเป็นมา: #F6403D; ตำแหน่ง: สัมบูรณ์; ซ้าย: 350px; ด้านบน: 350px; TEXT-ALIGN: CENTER; ระดับความสูง: 50px; z-index: 999;}สรุป
ผ่านการเรียนรู้กรอบของ React คุณสามารถค้นพบความคิดใหม่จากคุณสมบัติใหม่ที่เป็นเอกลักษณ์ ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นความช่วยเหลือในการศึกษาหรือทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร