序文
ReactとAngularjsの思考は完全に異なることがわかりました。AngularJは双方向の結合、 Modal層のデータをカスタマイズし、両方向に変更することに基づいています。しかし、反応はプロップと状態を通じてビュー層の状態を変えます。以下は私が書いたCarouselの写真コンポーネントです。直接見ることができます。コードは非常に簡単です。原則は、 componentDidMount後に反応することにより、CSSスタイルをsetState変更することです。
次の説明：GIFは非常に止まっていますが、実際の効果はまだ非常に良いです。
以下はサンプルコードです
lunbo.js
require（ 'styles/app.css'）; require（ 'remormize.css/remormize.css'）;インポート「react」からのインポート; 'racep-dom'const lunbo = react.createclass（{propstypes：{interval：react.proptypes.number、racuplay：react.propttypttypes.bul.bul.bul.bul.bul.bul.bul. defaultActiveIndex：React.Proptypes.bool、defaultActiveIndex：React.proptypes.bool、react.proptypes.oneof ['right'、 'left']、number：race.proptypes.number、boxstyle：race.proptypes.string、}、returnplops：getDefaultPlops { DefaultActiveIndex：0、方向： 'right'}、getInitialState（）{return {activeindex：this.props.defaultactiveIndex？this.props.defaulticiveIndex：0、方向：this.props.direction？this.props.direction： 'right'} componentwillreceiveprops（）{}、componentwillunmount（）{this.timeouter）; if.props.direction "left"）{this.timeterval（this.plops.interval）}} {let indexin？ this.setState（ActiveIndex：index}）、playleft（indexin？indexin：this.state.activeindex-1; 0：「One Posion」：return "case 3： Oldindex = this.activeindex; onclick = {this.left}> left </span> <span classname = "righticon" onclick = {this.right}> right </span> <ul classname = {this.position（）}> {this.props.children} </ul> </div>}};index.js
'core-js/fn/object/assign'; 'ruction'からのincomperime from 'ruct-dom'からのインポートlunbo '; components/lunbo'; reactdom.render(< lunbo interval = {100} number = {4} boxstyle = "content" interval = {4000}> <li li className = "boxstyleli">！[]（http://upload-images.jiansshu.io/upload_images/971705-6D38b15221a904c9.jpg?imagemogr2/auto-orient/strip%%7Cimageview2/2/2/2/w/2/2/w/ className = "BoxStyleli">！[]（http://upload-images.jiansshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imagemogr2/auto-orient/strip%7Cimageview2/2/2/2/2/2/w. className = "BoxStyleli"> className = "boxstyleli">！[]（http://upload-images.jiansshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imagemogr2/auto-orient/strip%%7cimageview2/2/2/w/w/w/w/1240） 、document.getElementById（ 'app'））;app.css
.content {width：400px;高さ：400px;ボーダー：3pxソリッドサドルブロウン。位置：相対;オーバーフロー：hidden;}。コンテンツul {display：block;幅：2500px;高さ：100％;フロート：左;位置：絶対; z-index：0; -webkit-transition：すべて0.5秒; -moz-transition：すべて0.5秒; -ms-transition：すべて0.5秒; -O-Transition：すべて0.5秒;遷移：すべて0.5s;}。boxstyleli {display：inline-block;幅：400px;高さ：400px; float：左;}。boxstyleli img {width：100％;高さ：100％;}。spanstyle {width：500px;高さ：400px;国境：3pxソリッド＃598b3a;背景：＃7177EB;位置：相対;}。One Position {左：0;}。Twoposition{左：-400px;}。高さ：50px;背景：＃CD4D5C;位置：絶対;左：0;トップ：350px;テキストアライグ：センター;ラインハイト：50px; z-index：999;}。righticon {width：50px;高さ：50px;背景：＃f6403d;位置：絶対;左：350px;トップ：350px;テキストアライグ：センター;ラインハイト：50px; z-index：999;}要約します
Reactのフレームワークを学ぶことで、そのユニークな新機能から新しい考え方を見つけることができます。上記は、この記事のコンテンツ全体です。皆の勉強や仕事に役立つことを願っています。ご質問がある場合は、メッセージを残してコミュニケーションをとることができます。