Prefácio
Descobri que o React e o AngularJs são completamente diferentes em seu pensamento, o AngularJS é baseado na ligação bidirecional, personalizando dados na camada Modal e depois mudando em ambas as direções. Mas o React altera o estado da camada de visão através do suporte e do estado. Abaixo está um componente de imagem do carrossel que escrevi, você pode dar uma olhada diretamente. O código é muito simples. O princípio é alterar o estilo CSS setState por reação após componentDidMount .
A explicação a seguir: O GIF está muito preso, mas o efeito real ainda é muito bom.
A seguir é o código de amostra
Lunbo.js
requer ('styles/app.css'); requer ('normalize.css/normalize.css'); importar reagir de 'react'; importar reactdom de 'react-dom'const lunbo = react.createclasT, {propstypes: {interval: reAct.PropTyPes.Number, autocomempela ({propStypes: {interval: reAct.PropTyPes.Number, autoclay: activeIndex:React.PropTypes.bool, defaultActiveIndex:React.PropTypes.bool, defaultActiveIndex:React.PropTypes.bool, direction:React.PropTypes.oneOf['right','left'], number:React.PropTypes.number, boxStyle:React.PropTypes.string, }, getDefaultProps () {return {intervalo: 3000, AutoPlay: true, defaultActiveIndex: 0, direção: 'direita'}}, getInitialState () {return {ActiveIndex: this.props.defafulActiveNIndex? This.Props.DeFeFIDEX: 0, this.Props.Defafirection? componentedidmount () {this.autoPlay (); this.timeouter = setInterval (this.playright, this.props.interval); IF (Índice> This.Props.Number-1) {index = 0; Position () {switch (estate -teatro) {Caso 0: Retorno "OnePonse"; }, direita () {ClearInterval (this.timeouter); <span classname = "lefticon" onclick = {this.left}> esquerda </span> <span classname = "righticon" onclick = {this.right}> right </span> <Ul ClassName = {this.Position ()} {this.Props.Children} </ul> </div.Index.js
importar 'core-js/fn/objeto/atribuir'; importar reagir de 'react'; importar o reatdom de 'react-dom'; importar lunbo de './components/lunbo' ;reactdom.render(<lunbo interval = {100} número = {4} boxstyle = "" content "{4000 {4} num ClassName = "Boxstylii">! ClassName = "Boxstylii">! ClassName = "Boxstyleli">! ClassName = "Boxstyleli">! , document.getElementById ('App'));App.css
.Content {Width: 400px; Altura: 400px; Fronteira: 3px Solid Saddlebrown; Posição: relativa; Overflow: Hidden;}. Content UL {Display: Block; Largura: 2500px; Altura: 100%; flutuar: esquerda; Posição: Absoluto; Z-Index: 0; -Webkit-transição: todos os 0,5s; -moz-transição: todos os 0,5s; -ms-transição: todos os 0,5s; -O-transição: todos os 0,5s; transição: todos 0.5s;}. boxstyleli {display: inline-block; Largura: 400px; Altura: 400px; float: esquerda;}. boxstyleli img {width: 100%; Altura: 100%;}. SpanStyle {Width: 500px; Altura: 400px; fronteira: 3px Solid #598B3A; Antecedentes: #7177EB; Posição: relativa;}. OnePosition {esquerda: 0;}. TwoPosition {esquerda: -400px;}. Altura: 50px; Antecedentes: #CD4D5C; Posição: Absoluto; Esquerda: 0; TOP: 350px; Alinhamento de texto: centro; altura da linha: 50px; Z-Index: 999;}. Righticon {Width: 50px; Altura: 50px; Antecedentes: #F6403D; Posição: Absoluto; Esquerda: 350px; TOP: 350px; Alinhamento de texto: centro; altura da linha: 50px; Z-Index: 999;}Resumir
Ao aprender a estrutura do React, você pode descobrir uma nova mentalidade a partir de seus novos recursos exclusivos. O acima é o conteúdo inteiro deste artigo. Espero que seja de ajuda para estudar ou trabalhar de todos. Se você tiver alguma dúvida, pode deixar uma mensagem para se comunicar.