这里有新鲜出炉的 ReactJS 入门教程,程序狗速度看过来!
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
React 刚出来不久,组件还比较少,不像 jquery 那样已经有很多现成的插件了,于是自己写了一个基于 React 的轮播效果组件,现在分享给大家,有需要的可以参考借鉴。
前言
我发现 React 和 AngularJS 思想完全不同,AngularJS 是基于双向绑定,在
层中定制数据,然后双向改变。但是 React 是通过 prop 和 state 来改变 view 层的状态。下面是我写的一个轮播图组件,可以直接看一下。代码很简单。原理就是通过 React 在
- Modal
后改变
- componentDidMount
,来动态改变 CSS 样式。
- setState
说明以下:看 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'
- }
- },
- getInitialState() {
- return {
- activeIndex: this.props.defaultActiveIndex ? this.props.defaultActiveIndex: 0,
- direction: this.props.direction ? this.props.direction: 'right'
- }
- },
- componentDidMount() {
- this.autoPlay();
- },
- componentWillReceiveProps() {
- },
- componentWillUnmount() {
- clearInterval(this.timeOuter);
- },
- autoPlay() {
- if (this.props.autoPlay) {
- if (this.props.direction === "right") {
- this.timeOuter = setInterval(this.playRight, this.props.interval);
- } else if (this.props.direction === "left") {
- this.timeOuter = setInterval(this.playLeft, this.props.interval);
- }
- }
- },
- playRight(indexIn) {
- let index = indexIn ? indexIn: this.state.activeIndex + 1;
- console.log(index);
- if (index > this.props.number - 1) {
- index = 0;
- }
- this.setState({
- activeIndex: index
- })
- },
- playLeft(indexIn) {
- let index = indexIn ? indexIn: this.state.activeIndex - 1;
- console.log(index);
- if (index < 0) {
- index = this.props.number - 1;
- }
- this.setState({
- activeIndex: index
- })
- },
- position() {
- switch (this.state.activeIndex) {
- case 0:
- return "onePosition";
- case 1:
- return "twoPosition";
- case 2:
- return "therePosition";
- case 3:
- return "fourPosition";
- }
- },
- left() {
- clearInterval(this.timeOuter);
- let oldIndex = this.props.activeIndex;
- this.playLeft(oldIndex + 1);
- this.autoPlay();
- },
- right() {
- clearInterval(this.timeOuter);
- let oldIndex = this.props.activeIndex;
- this.playRight(oldIndex - 1);
- this.autoPlay();
- },
- render() {
- let {
- interval,
- autoPlay,
- activeIndex,
- defaultActiveIndex,
- direction,
- number,
- boxStyle
- } = this.props;
- return < div className = {
- boxStyle
- } > <span className = "leftIcon"onClick = {
- this.left
- } > left < /span>
- <span className="rightIcon" onClick={this.right}>right</span > <ul className = {
- this.position()
- } > {
- this.props.children
- } < /ul>
- </div >
- }
- });
- export
- default LunBo;
index.js
- import 'core-js/fn/object/assign';
- import React from 'react';
- import ReactDOM from 'react-dom';
- import LunBo from './components/Lunbo';
- ReactDOM.render( < LunBo interval = {
- 100
- }
- number = {
- 4
- }
- boxStyle = "content"interval = {
- 4000
- } > <li className = "boxStyleLi" > ![](http: //upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</li> <li className="boxStyleLi">![](http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</li></LunBo> ,document.getElementById('app'));
App.css
- .content {
- width: 400px;
- height: 400px;
- border: 3px solid saddlebrown;
- position: relative;
- overflow: hidden;
- }.content ul {
- display: block;
- width: 2500px;
- height: 100 % ;
- float: left;
- position: absolute;
- z - index: 0; - webkit - transition: all 0.5s; - moz - transition: all 0.5s; - ms - transition: all 0.5s; - o - transition: all 0.5s;
- transition: all 0.5s;
- }.boxStyleLi {
- display: inline - block;
- width: 400px;
- height: 400px;
- float: left;
- }.boxStyleLi img {
- width: 100 % ;
- height: 100 % ;
- }.spanStyle {
- width: 500px;
- height: 400px;
- border: 3px solid#598b3a;
- background: #7177eb;
- position: relative;
- }.onePosition {
- left: 0;
- }.twoPosition {
- left: -400px;
- }.therePosition {
- left: -800px;
- }.fourPosition {
- left: -1200px;
- }
- .leftIcon {
- width: 50px;
- height: 50px;
- background: #cd4d5c;
- position: absolute;
- left: 0;
- top: 350px;
- text - align: center;
- line - height: 50px;
- z - index: 999;
- }.rightIcon {
- width: 50px;
- height: 50px;
- background: #f6403d;
- position: absolute;
- left: 350px;
- top: 350px;
- text - align: center;
- line - height: 50px;
- z - index: 999;
- }
总结
来源: http://www.phperz.com/article/17/0721/332080.html