Préface
J'ai trouvé que React et AngularJS sont complètement différents dans leur pensée, AngularJS est basé sur des données de liaison bidirectionnelles, de personnalisation des données dans Modal , puis de changer dans les deux sens. Mais React modifie l'état de la couche de vue via l'hélice et l'état. Vous trouverez ci-dessous un composant d'image de carrousel que j'ai écrit, vous pouvez y jeter un œil directement. Le code est très simple. Le principe est de modifier setState le style CSS en réagissant après componentDidMount .
L'explication suivante: Le GIF est très coincé, mais l'effet réel est toujours très bon.
Voici l'exemple de code
Lunbo.js
require ('styles / app.css'); require ('normalize.css / normalize.css'); importer réact de 'react'; importer réactdom de 'react-dom'const lunbo = react.createclass ({prostypes: {interval: react.propTypes.Number, AutoPlay IMCTIFIDEX: react.proptypes.bool, defaultActiveIndex: react.proptypes.bool, defaultactiveIndex: react.proptypes.bool, direction: react.proptypes.number [`` droit ' return {Interval: 3000, AutoPlay: true, defaultActiveIndex: 0, Direction: 'Right'}}, getInitialState () {return {inactiveNEX: this.props.defaultactiveIndex? this.autoplay ();}, composantwillReceiveProps () {}, composantwillunMount () {clearInterval (this.timeouter); this.timeouter = setInterval (this.playRight, this.props.Interval);} else if (this.props.direction === "Left") {this.timeouter = setInterval (this.playleft, this.props.interval); console.log (index); InciteIndex: index}), position () {switch (this.state.active) {case 0: return "OnePosition"; this.Autoplay ();}, droit () {ClearInterVal (this.Timeouter); className = {boxstyle}> <span className = "Lefticon" onClick = {this.left}> gauche </span> <span className = "droite" onclick = {this.right}> droit </span> <ul classname = {this.position ()}> {this.props.props.child} </ul> </ div>}); Lunbo;index.js
import 'core-js / fn / objet / attribution'; importer réagir à partir de 'react'; importez la réactdom className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b152221a904c9.jpg?imageMogr2/Auto-orient/strip%7CimageView2/2/w/1240) </li> <li className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/Auto-orient/strip%7CimageView2/2/w/1240) </li> <li classname = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/Auto-orient/strip%7CimageView2/2/w/1240) </li> <li className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/Auto-orient/strip%7CimageView2/2/w/1240) </ li> , document.getElementById («app»));
App.css
.Content {largeur: 400px; hauteur: 400px; Border: 3px solide SaddleBrown; Position: relative; Overflow: Hidden;}. Contenu ul {affichage: bloc; Largeur: 2500px; hauteur: 100%; flottant: à gauche; Position: absolue; Z-index: 0; -Webkit-Transition: Tous 0,5S; -Moz-transition: tous 0,5 s; -ms-transition: tous 0,5 s; -o-transition: tous 0,5S; Transition: tous 0,5S;}. BoxStyleli {affichage: bloc en ligne; Largeur: 400px; hauteur: 400px; float: gauche;}. BoxStyleli img {largeur: 100%; Hauteur: 100%;}. Spanstyle {largeur: 500px; hauteur: 400px; Border: 3px solide # 598B3A; Contexte: # 7177EB; Position: relative;}. OnePosition {Left: 0;}. TwoPosition {Left: -400px;}. Toi {Left: -800px;}. Four position {Left: -1200px;}. LeftIcon {width: 50px; hauteur: 50px; Contexte: # CD4D5C; Position: absolue; à gauche: 0; En haut: 350px; Texte-aligne: Centre; hauteur de ligne: 50px; Z-index: 999;}. RighTicon {largeur: 50px; hauteur: 50px; Contexte: # F6403D; Position: absolue; Gauche: 350px; En haut: 350px; Texte-aligne: Centre; hauteur de ligne: 50px; Z-Index: 999;}Résumer
En apprenant le cadre de React, vous pouvez découvrir un nouvel état d'esprit à partir de ses nouvelles fonctionnalités uniques. Ce qui précède est l'intégralité du contenu de cet article. J'espère que cela sera d'une aide à l'étude ou au travail de chacun. Si vous avez des questions, vous pouvez laisser un message pour communiquer.