Prefacio
Descubrí que React y AngularJS son completamente diferentes en su pensamiento, AngularJS se basa en la unión bidireccional, personalizando los datos en Modal y luego cambian en ambas direcciones. Pero React cambia el estado de la capa de vista a través de Prop y Estado. A continuación se muestra un componente de imagen de carrusel que escribí, puede echarle un vistazo directamente. El código es muy simple. El principio es cambiar el estilo CSS setState por React After componentDidMount .
La siguiente explicación: El GIF está muy atascado, pero el efecto real sigue siendo muy bueno.
El siguiente es el código de muestra
Lunbo.js
requerir ('styles/app.css'); requerir ('normalize.css/normalize.css'); import react desde 'react'; import reactom ActiveIndex: react.proptypes.bool, defaultActiveIndex: react.proptypes.bool, defaultActiveIndex: react.proptypes.bool, dirección: react.proptypes.onof ['right', 'izquierda'], numin return {interval: 3000, autoplay: true, defaultActiveIndex: 0, dirección: 'right'}}, getInitialState () {return {activoIndex: this.props.defaultActiveIndex? this.props.defefaultiveIndex: 0, direction: this.props.direction? this.props.direction: 'derecho'}}, componente () {) {) this.auToPlay (); this.timeuter = setInterval (this.playright, this.props.interval); console.log (index); ActiveIndex: índice})}, posición () {switch (this.state.ActiveIndex) {Caso 0: return "OnePosition"; this.playleft (OldIndex+1); } = this.props; return <div classname = {boxStyle}> <span classname = "lefticon" onClick = {this.left}> izquierda </span> <span classname = "recthicon" onClick = {this.right}> right </span> <ul classname = {this.position ()}> {this.props.children }}); exportar lunbo predeterminado;index.js
import 'core-js/fn/object/asigne'; import react de 'react'; import reactdom desde 'react-dom'; import lunbo de './Components/lunbo';reactdom.render(<lunbo interval = {100} número = {4} boxstyle = "contenido" = {4000}> <li className = "BoxStyLeli">! [] (http://upload-images.jiansshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip%7ciMageView2/2/w/1240 classname = "BoxStyLeli">! [] (http://upload-images.jiansshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip%7ciMageView2/2/w/1240 className = "BoxStyLeli">! [] (http://upload-images.jiansshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip%7CiMageView2/2/w/1240 className = "BoxStyLeli">! [] (http://upload-images.jiansshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip%7ciMageView2/2/w/1240) </li liBo> </li liBo> </li liBo> </li li liBo> </li liBo> </li LiMo> </li LiMo> </li LiMo> </li LiMo> </li LiO , document.getElementById ('app'));App.css
.content {ancho: 400px; Altura: 400px; Border: 3px Solid Saddlebrown; Posición: relativo; desbordamiento: Hidden;}. Content ul {display: block; Ancho: 2500px; Altura: 100%; flotante: izquierda; Posición: Absoluto; Índice z: 0; -WebKit-Transition: todos 0.5s; -Moz-Transition: todos 0.5s; -Ms-Transition: todos 0.5s; -O-transición: todos 0.5s; Transición: todos 0.5s;}. BoxStyleli {Display: Inline-Block; Ancho: 400px; Altura: 400px; float: izquierda;}. BoxStyleli img {ancho: 100%; Altura: 100%;}. SpanStyle {ancho: 500px; Altura: 400px; Border: 3px Solid #598B3A; Antecedentes: #7177eb; posición: relativa;}. OnePosition {izquierda: 0;}. twoPosition {izquierda: -400px;}. Position {izquierda: -800px;}. cuatroposition {izquierda: -1200px;}. Lefticon {ancho: 50px; Altura: 50px; Antecedentes: #CD4D5C; Posición: Absoluto; Izquierda: 0; Arriba: 350px; Text-Align: Center; Línea de altura: 50px; Z-índice: 999;}. Rayicon {ancho: 50px; Altura: 50px; Antecedentes: #F6403D; Posición: Absoluto; Izquierda: 350px; Arriba: 350px; Text-Align: Center; Línea de altura: 50px; Índice Z: 999;}Resumir
Al aprender el marco de React, puede descubrir una nueva mentalidad de sus nuevas características únicas. Lo anterior es todo el contenido de este artículo. Espero que sea de ayuda para el estudio o el trabajo de todos. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.