머리말
나는 반응과 angularjs가 그들의 생각이 완전히 다르다는 것을 알았고, AngularJS는 양방향 바인딩을 기반으로하고, Modal 층의 데이터를 사용자 정의 한 다음 양방향으로 변경한다는 것을 알았습니다. 그러나 RECT는 PROP 및 상태를 통해 뷰 레이어의 상태를 변경합니다. 아래는 내가 쓴 회전 목마 그림 구성 요소입니다. 직접 볼 수 있습니다. 코드는 매우 간단합니다. 원칙은 componentDidMount 이후 React에 의해 CSS 스타일을 setState 변경하는 것입니다.
다음과 같은 설명 : GIF는 매우 고정되었지만 실제 효과는 여전히 매우 좋습니다.
다음은 샘플 코드입니다
lunbo.js
요구 ( 'Styles/app.css'); require ( '정상화 .css/정상화. ActiveIndex : React.proptypes.bool, defaultactiveIndex : react.proptypes.bool, defaultactiveIndex : react.proptypes.bool, 방향 : react.proptypes.oneof [ '오른쪽', '왼쪽'], 번호 : react.proptypes.number, boxstyle : rect.proptypes. getDefaultProps () {return {interval : 3000, autoplay : true, defaultactiveindex : 0, direction : 'right'}}, getInitialState () {return {activeindex : this.props.defaultactiveindex? this.props.defaultActiveAndex : 0, direction? componentDidMount () {this.autoPlay (); componentWillReceiveProps (), compontwillUntval (this.timeouter); this.timeouter = setInterval (this.props.direction === "{this.timeouter = setInterval (this.playleft, this.props.interval) {indexin+1; console.log (index) {index : indexin) {index indexin? ActiveIndex}) {return "oneposition"; 이. . }}); 내보내기 기본 Lunbo;index.js
import 'core-js/fn/객체/객체/할당'; 'react'에서 가져 오기; 'react-dom'에서 가져 오는 반응 ;/components/lunbo '; reactdom.render(<lunbo interval = {100} number = {4} boxstyle = "content"{4000}> <li className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imagemog2/auto-orient/strip%7cimageview2/2/w/w/1240) </li> < className = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagemogr2/auto-orient/strip%7cimageview2/2/w/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-28d6d5d8d3b59bc.jpg?imagemogr2/auto-orient/strip%7cimageview2/2/w/w/1240) </lunbo> , 문서 .getElementById ( 'app'));app.css
.Content {너비 : 400px; 높이 : 400px; 국경 : 3px Solid SaddleBrown; 위치 : 상대; 오버플로 : 숨겨진;}. content ul {display : block; 너비 : 2500px; 높이 : 100%; 플로트 : 왼쪽; 위치 : 절대; z- 인덱스 : 0; -webkit-transition : 모두 0.5s; -모조 전환 : 모든 0.5 초; -ms-transition : 모두 0.5s; -O- 전달 : 모두 0.5s; 전환 : 모든 0.5s;}. Boxstyleli {디스플레이 : 인라인 블록; 너비 : 400px; 높이 : 400px; float : 왼쪽;}. Boxstyleli img {너비 : 100%; 높이 : 100%;}. 스팬 스타일 {너비 : 500px; 높이 : 400px; 국경 : 3px 고체 #598b3a; 배경 : #7177EB; 위치 : 상대;}. oneposition {왼쪽 : 0;}. twoposition {왼쪽 : -400px;}. 높이 : 50px; 배경 : #CD4D5C; 위치 : 절대; 왼쪽 : 0; 상단 : 350px; 텍스트 정렬 : 센터; 라인 높이 : 50px; z-index : 999;}. Righticon {너비 : 50px; 높이 : 50px; 배경 : #f6403d; 위치 : 절대; 왼쪽 : 350px; 상단 : 350px; 텍스트 정렬 : 센터; 라인 높이 : 50px; z- 안수 : 999;}요약
React의 틀을 배우면 독특한 새로운 기능에서 새로운 사고 방식을 발견 할 수 있습니다. 위는이 기사의 전체 내용입니다. 모든 사람의 공부 나 일에 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.