Vorwort
Ich fand, dass React und AngularJs in ihrem Denken völlig unterschiedlich sind. AngularJS basiert auf einer Zwei-Wege-Bindung, dem Anpassen von Daten in Modal Schicht und dann in beide Richtungen. React ändert jedoch den Stand der Sichtschicht durch Prop und Zustand. Unten finden Sie eine Karussell -Bildkomponente, die ich geschrieben habe. Sie können es sich direkt ansehen. Der Code ist sehr einfach. Das Prinzip besteht darin, den CSS -Stil setState durch Reagieren nach componentDidMount zu verändern.
Die folgende Erklärung: Das GIF ist sehr festgefahren, aber der tatsächliche Effekt ist immer noch sehr gut.
Das Folgende ist der Beispielcode
Lunbo.js
require('styles/App.css');require('normalize.css/normalize.css');import React from 'react';import ReactDOM from 'react-dom'const LunBo=React.createClass({ propsTypes:{ interval:React.PropTypes.number, autoPlay:React.PropTypes.bool, ActiveIndex: react.proptypes.bool, defaultActIctIndex: react.proptypes.bool, defaultActIndex: react.proptypes.bool, Richtung: react.proptypes.oneof ['rechts', 'links'], Nummer: react.proptypes.number, boxstyle: react.proact.propt.proptyle.style: boxstyle: React.Ract.Ract.Ract.Ract.Ract.Propt. getDefaultProps () {return {intervall: 3000, autoplay: true, defaultActIndex: 0, Richtung: 'Right'}}, getInitialState () {return {activeIndex: this.props.DefaultIctIctIndex? this.Props.DefaultActiveIndex: 0, Direction: This.props. componentDidmount () {this.autoPlay (); timeOuder = setInterval (this.playright, this.Props.Interval); console.log (index); ActiveIndex: Index}}, Position () {Switch.State.ActiveIndex) {Fall 0: Return "Inseposition"; this.autoPlay (); className = {boxStyle}> <span className = "linkicon" onclick = {this.left}> links </span> <span className = "righticon" onclick = {this.right}> rechts </span> <ul className = {this.position ()} {this.trprops. Lunbo;index.js
Importieren Sie 'Core-js/fn/Object/zugewiesen'; importieren reagieren aus 'react'; importieren reagdom aus 'react-dom'; lunbo aus './components/lunbo';Reactdom.render(<Lunbo Interval = {100} Nummer = {4} boxstyle = "content" Inval "{4000 {4000 {4000 {4000} {4000 {4000} className = "boxStyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imagemogr2/Auto-orient/strip%7CimageView2/2/2/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w/w.austripe/strip%7cimage2/2/w.1240) < className = "boxStyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagemogr2/auto-orient/strip%7cimageview2/2/2/2/2/w/w/w/w/w/w/w/w/w/w/w/w/w/1240) < className = "boxStyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imagemogr2/auto-orient/strip%7cimageview2/2/2/2/2/2/2/w/1240) < className="boxStyleLi"></li></LunBo> , document.getElementById ('App'));App.css
.Content {Breite: 400px; Höhe: 400px; Grenze: 3px solide saddlebrown; Position: Relativ; Überlauf: versteckt;}. Inhalt ul {display: block; Breite: 2500px; Höhe: 100%; float: links; Position: absolut; Z-Index: 0; -Webkit-Übergang: Alle 0,5s; -moz-Übergang: Alle 0,5s; -MS-Übergang: Alle 0,5s; -O-Übergang: Alle 0,5s; Übergang: Alle 0,5s;}. BoxStyleli {Anzeige: Inline-Block; Breite: 400px; Höhe: 400px; float: links;}. boxstyleli img {width: 100%; Höhe: 100%;}. SpanStyle {Breite: 500px; Höhe: 400px; Grenze: 3px Solid #598b3a; Hintergrund: #7177EB; Position: relativ;}. ONEPOSION {links: 0;}. Twoposition {links: -400px;}. Thereposition {links: -800px;}. Vierposition {links: -1200px;}. linkicon {width: 50px; Höhe: 50px; Hintergrund: #CD4D5C; Position: absolut; links: 0; Oben: 350px; Text-Align: Mitte; Zeilenhöhe: 50px; Z-Index: 999;}. righticon {width: 50px; Höhe: 50px; Hintergrund: #f6403d; Position: absolut; links: 350px; Oben: 350px; Text-Align: Mitte; Zeilenhöhe: 50px; Z-Index: 999;}Zusammenfassen
Durch das Erlernen des React -Rahmens können Sie eine neue Denkweise aus den einzigartigen neuen Funktionen entdecken. Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Studium oder die Arbeit aller Hilfe helfen. Wenn Sie Fragen haben, können Sie eine Nachricht zur Kommunikation überlassen.