Kata pengantar
Saya menemukan bahwa React dan AngularJS benar-benar berbeda dalam pemikiran mereka, AngularJS didasarkan pada pengikatan dua arah, menyesuaikan data di lapisan Modal , dan kemudian berubah di kedua arah. Tetapi bereaksi mengubah keadaan lapisan tampilan melalui penyangga dan status. Di bawah ini adalah komponen gambar korsel yang saya tulis, Anda dapat melihatnya secara langsung. Kode ini sangat sederhana. Prinsipnya adalah mengubah gaya CSS setState dengan bereaksi setelah componentDidMount .
Penjelasan berikut: GIF sangat macet, tetapi efek sebenarnya masih sangat bagus.
Berikut ini adalah kode sampel
Lunbo.js
memerlukan ('styles/app.css'); membutuhkan ('normalize.css/normalize.css'); impor bereaksi dari 'react'; impor reactdom dari 'react-dom'const lunbo = react.createClass ({propstipes: {interval: react.proptypes.number, autoplay: react. defaultActiveIndex:React.PropTypes.bool, defaultActiveIndex:React.PropTypes.bool, direction:React.PropTypes.oneOf['right','left'], number:React.PropTypes.number, boxStyle:React.PropTypes.string, }, getDefaultProps(){ return{ interval:3000, autoPlay:true, DefaultActiveIndex: 0, arah: 'kanan'}}, getInitialState () {return {ActiveIndex: this.props.defaultactiveIndex? this.props.defaultactiveIndex: 0, this.props.direction? ini. ComponentWillReceiveProps () {}, componentwillunmount () {clearinterval (this.timeouter); if (this.props.direction === "kiri") {this.timeouter = setInterval (this.playleft, this.props.interval); this.setState ({ActiveIndex: Index})}, playleft (indexin) {let index = indexin: this.state.activeIndex-1; 0: OnePosisi "; ClearInter (This.Timeouter); className="leftIcon" onClick={this.left}>left</span> <span className="rightIcon" onClick={this.right}>right</span> <ul className={this.position()}> {this.props.children} </ul> </div> }});export default LunBo;index.js
impor 'core-js/fn/objek/penugasan'; Impor bereaksi dari 'react'; impor reactdom dari 'react-dom'; import lunbo dari './components/lunbo';reactdom.render( <lunbo Interval = {100} number = {4} boxstyle = "content" interval = {4000 {4000}> <4 {LIB boxstyle = "content" content "interval = {4000 {4000 {4000 {4 {4} boxstyle =" content "content" content "= {4000 {4000 {4000 className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imagogr2/auto- orient/strip%7cimageePiew2/2) </orient/strip komputer className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagogr2/auto- orient/strip%7cimageePiew2/2) </orient/strip className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imagogr2/Auto- orient/strip%7cimeSeview2/2) className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto- orient/strip%7cimageePiew2/2) </orient- orient/strip%7cimagiew2/ , document.geteLementById ('app'));App.css
.content {width: 400px; Tinggi: 400px; Perbatasan: Saddlebrown padat 3px; Posisi: kerabat; overflow: tersembunyi;}. Content ul {display: block; Lebar: 2500px; Tinggi: 100%; float: kiri; Posisi: Absolute; z-index: 0; -webkit-transisi: semua 0,5-an; -Moz-transisi: semua 0,5S; -Ms-transisi: semua 0,5s; --transisi: semua 0,5s; transisi: semua 0,5s;}. Boxstyleli {display: inline-block; Lebar: 400px; Tinggi: 400px; float: left;}. boxstyleli img {width: 100%; Tinggi: 100%;}. VGANSTYLE {Lebar: 500px; Tinggi: 400px; Perbatasan: 3px Solid #598B3A; Latar Belakang: #7177EB; Posisi: Relatif;}. OnePosisi {kiri: 0;}. Twoposisi {kiri: -400px;}. Therposition {left: -800px;}. Fourposition {Left: -1200px;}. LEVERICON {lebar: 50px; Tinggi: 50px; Latar Belakang: #CD4D5C; Posisi: Absolute; Kiri: 0; Atas: 350px; Teks-Align: tengah; Line-Height: 50px; z-index: 999;}. Righticon {width: 50px; Tinggi: 50px; Latar Belakang: #F6403D; Posisi: Absolute; Kiri: 350px; Atas: 350px; Teks-Align: tengah; Line-Height: 50px; z-index: 999;}Meringkaskan
Melalui mempelajari kerangka kerja React, Anda dapat menemukan pola pikir baru dari fitur -fitur baru yang unik. Di atas adalah seluruh konten artikel ini. Saya berharap ini akan membantu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk berkomunikasi.