使用React实现轮播效果组件示例代码
186 浏览量
2020-11-22
20:31:49
上传
评论
收藏 117KB PDF 举报
使用使用React实现轮播效果组件示例代码实现轮播效果组件示例代码
前言前言
我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通
过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过React
在componentDidMount后改变setState，来动态改变css样式。
说明以下：看gif很卡，但是实际效果还是很好的。
以下是示例代码以下是示例代码
LunBo.js
require('styles/App.css');
require('normalize.css/normalize.css');
import React from 'react';
import ReactDOM from 'react-dom'
const LunBo=React.createClass({
propsTypes:{
interval:React.PropTypes.number,
autoPlay:React.PropTypes.bool,
activeIndex:React.PropTypes.bool,
defaultActiveIndex:React.PropTypes.bool,
direction:React.PropTypes.oneOf['right','left'],
number:React.PropTypes.number,
boxStyle:React.PropTypes.string,
},
getDefaultProps(){
return{
interval:3000,
autoPlay:true,
defaultActiveIndex:0,
direction:'right'
评论0