Предисловие
Я обнаружил, что React и Angularjs полностью различаются по своему мышлению, AngularJS основана на двустороннем привязке, настройке данных в Modal слое, а затем изменяется в обоих направлениях. Но React изменяет состояние слоя представления через опору и состояние. Ниже приведен компонент изображения каруселей, который я написал, вы можете взглянуть на это напрямую. Код очень прост. Принцип состоит в том, чтобы setState изменить стиль CSS, реагируя после componentDidMount .
Следующее объяснение: GIF очень застрял, но фактический эффект все еще очень хороший.
Ниже приведен пример кода
Lunbo.js
require ('styles/app.css'); require ('normarize.css/normalize.css'); импорт реагирует из «react»; импорт реагируется из 'React-dom'const lunbo = react.createclass ({propstypes: {extal: react.proptypes.number, autoplay: React. ActiveIndex: React.proptypes.bool, defaultActiveIndex: react.proptypes.bool, defaultactiveIndex: React.proptypes.bool, Направление: React.proptypes.OneOf [«Право», «левый»], номер: reAct.proptypes.number, boxstyle: reauct. getDefaultprops () {return {evutal: 3000, Autoplay: true, defaultActiveIndex: 0, направление: 'right'}}, getInitialState () {return {activeIndex: this.props.defaultactaintex? ComponentDidMount () {this.autoplay (); this.timeouter = setInterval (this.playright, this.props.Interval); Console.log (index); This.SetState ({ActiveIndex: Index})}, Position () {Switch (this.state.activeDex) {case 0: return "oeposity"; это. Playleft (Oldindex+1); } = this.props; }}); экспорт по умолчанию lunbo;index.js
Импорт 'core-js/fn/object/ressage'; import React from 'React'; импорт реагирует из 'React-dom'; импорт lunbo from './components/lunbo'; reactdom.render(< lunbo interval = {100} number = {4} boxStyle = "Содержание" evutal = {4000}> <li classname = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imagemogr2/auto-Orient/strip%7CimageView2/2/w/1240) </lipient/strip%7CimageView2/2/w/1240) </liuto-orient/strip%7CimageView2/2/1240) </liuto-orient/strip%7Cimageview2/2/1240) </liato-orient/strip%7CimageView2/2/1240) classname = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagemogr2/auto-Orient/strip%7CimageView2/2/w/1240) </lient/ li classname = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imagemogr2/auto-Orient/strip%7CimageView2/2/w/1240) </lipient%7Cimageview2/2/w/1240) </liuto-Orient/-strip%7CimageView2/2/1240) classname = "boxstyleli">! [] (http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imagemogr2/auto-Orient/strip%7CimageView2/2/w/1240) </lunbo> , document.getElementById ('app'));App.css
.content {ширина: 400px; Высота: 400px; Граница: 3PX Сплошная седлбран; позиция: относительно; переполнение: hidden;}. Контент ul {display: block; Ширина: 2500px; высота: 100%; Плавание: осталось; позиция: абсолютно; z-index: 0; -Вобкит-трансляция: все 0,5 с; -Моз-трансляция: все 0,5 с; -Сс-транзиция: все 0,5 с; -О-транзиция: все 0,5 с; Переход: все 0,5S;}. Boxstyleli {Display: Inline Block; Ширина: 400px; Высота: 400px; Float: Left;}. Boxstyleli img {ширина: 100%; Высота: 100%;}. Spanstyle {ширина: 500px; Высота: 400px; Граница: 3PX SOLIT #598B3A; Фон: #7177EB; позиция: относительно;}. OnePosition {слева: 0;}. Высота: 50px; Фон: #CD4D5C; позиция: абсолютно; слева: 0; Верх: 350px; Текст-альбом: Центр; высота линии: 50px; z-index: 999;}. Право {ширина: 50px; Высота: 50px; Фон: #F6403D; позиция: абсолютно; Слева: 350px; Верх: 350px; Текст-альбом: Центр; высота линии: 50px; z-index: 999;}Суммировать
Изучая структуру React, вы можете обнаружить новое мышление из его уникальных новых функций. Вышеуказанное - все содержание этой статьи. Я надеюсь, что это будет помогать для каждого обучения или работы. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для общения.