使用React实现轮播效果组件示例代码
作者：MakingChoice
字体：[ ] 类型：转载 时间：
React刚出来不久，组件还比较少，不像jquery那样已经有很多现成的插件了，于是自己写了一个基于React的轮播效果组件，现在分享给大家，有需要的可以参考借鉴。
我发现React和AngularJS思想完全不同，AngularJS是基于双向绑定，在Modal层中定制数据，然后双向改变。但是React是通过prop和state来改变view层的状态。下面是我写的一个轮播图组件，可以直接看一下。代码很简单。原理就是通过React在componentDidMount后改变setState，来动态改变css样式。
说明以下：看gif很卡，但是实际效果还是很好的。
以下是示例代码
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(){
interval:3000,
autoPlay:true,
defaultActiveIndex:0,
direction:'right'
getInitialState(){
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){
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";
clearInterval(this.timeOuter);
let oldIndex=this.props.activeI
this.playLeft(oldIndex+1);
this.autoPlay();
clearInterval(this.timeOuter);
let oldIndex=this.props.activeI
this.playRight(oldIndex-1);
this.autoPlay();
activeIndex,
defaultActiveIndex,
direction,
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}
export default LunBo;
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"&&/li& &li className="boxStyleLi"&&/li& &li className="boxStyleLi"&&/li& &li className="boxStyleLi"&&/li&&/LunBo& ,document.getElementById('app'));
width: 400
height: 400
.content ul{
width: 2500
height: 100%;
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-
width: 400
height: 400
.boxStyleLi img{
width: 100%;
height: 100%;
.spanStyle{
width: 500
height: 400
border: 3px solid #598b3a;
background: #7177
.onePosition{
.twoPosition{
left: -400
.therePosition{
left: -800
.fourPosition{
left: -1200
.leftIcon{
height: 50
background: #cd4d5c;
text-align:
line-height: 50
z-index: 999;
.rightIcon{
height: 50
background: #f6403d;
text-align:
line-height: 50
z-index: 999;
通过React这一门框架的学习，你可以从它独特的新特性中发掘一种新的思维模式。以上就是这篇文章的全部内容，希望对大家的学习或者工作能带来一定的帮助，如果有疑问可以留言交流。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具初探 React 组件 - 为程序员服务
初探 React 组件
React 的核心思想就是使用组件化的思想来开发出一个个独立的组件，然后将组件再拼装成一个完整的应用，从
分层思想上来考虑的话，React 专注在 UI 展现层上。
一文中，有详细的讲解过使用
来开发组件的结构，也提到了使用
Inline Style
可以给组件定义样式，这样能确保组件的独立性。除了结构和样式，一个独立完整的组件还包含一些其他的部分。
从一个简单的 Dropdown 组件来开启我们的 React 组件化之路。
首先需要说明的是，Demo 的代码都是
的语法，之后的 React 文章中用到的 JavaScript 代码都将使用
的语法，如果你还不了解
，建议先了解一下它的语法。另外考虑到 Demo 代码量的问题忽略了组件的样式部分，假设样式是通过外链或
Inline Style
的形式加载进来的。
// dropdown.js
class Dropdown ponent {
constructor (props) {
super(props);
this.state = {
visibile: false
onClick = () =& {
this.setState({
visible: !this.state.visible
render () {
const displayValue = this.state.visible ? 'block' : 'none';
&div className="dropdown"&
&button className="btn btn-default" onClick={this.onClick}&Browsers&/button&
&ul className="dropdown-menu" style={{display: displayValue}}&
&li&&a href="/react-components-get-started.html"&Firefox&/a&&/li&
&li&&a href="/react-components-get-started.html"&Chrome&/a&&/li&
&li&&a href="/react-components-get-started.html"&Safari&/a&&/li&
&li&&a href="/react-components-get-started.html"&Opera&/a&&/li&
&li&&a href="/react-components-get-started.html"&Internet Expoler&/a&&/li&
export default D
state 状态
React 的组件使用
的概念来描述
组件本身的可变数据
部分。Dropdown 组件最基本的用户交互逻辑可以抽象成两个状态
，进一步用代码来描述就是
visible: false（收起）
visible: true（展开）
要获取组件的状态都需要通过
this.state
来获取，在
constructor（构造函数）
中，可以通过
this.state
来设置组件的
要改变状态就必须通过
this.setState
方法来改变，不能通过直接修改
this.state.xxx = "xxx"
来进行修改，因为
this.state
immutable（不可变）
的。可以认为
方法，这样能更好的理解。
visible: false/true
的状态用于关联到菜单的展开和收起的两种样式，点击的时候通过切换两种状态，React 根据状态来自动更新 UI。
如果按照传统的开发逻辑，我们要控制 Dropdown 菜单的收起和展开，需要先获取到菜单的 DOM 元素，然后在点击时，直接改变 DOM 元素的样式。
React 使用状态机来简化了繁琐的 DOM 操作，传统开发模式中繁琐的 DOM 操作都可以转变成状态的改变，底层的 DOM 操作由 React 来接管。如果你在使用 React 开发应用的时候想着应该怎么操作 DOM，这时候需要反思一下是不是使用 React 的方式有问题。
props 属性
如果要把 Dropdown 组件做成公用的，我们需要做进一步的改进和优化。Dropdown 的按钮内容以及菜单的内容都需要依赖父组件来传递。
父组件将数据传递给子组件，这个时候就需要通过
来传递了。
// 加载Dropdown组件
import Dropdown from './dropdown';
class App ponent {
constructor (props) {
super(props);
static defaultProps = {
dropdownBtn: 'Browsers',
dropdownItems: [
'Firefox',
'Internet Expoler'
render () {
&h1&This is a Dropdown demo.&/h1&
btnText={this.props.dropdownBtn}
items={this.props.dropdownItems} /&
App 组件中需要用到 Dropdown 组件，先使用
来加载该组件。将 Dropdown 需要用到的数据存储到 App 组件的默认的
// 组件默认的props都可以存放到这里
static defaultProps = {...}
然后使用属性声明的方式传递给 Dropdown 组件。
// this.props包含了App中所有的属性
&Dropdown btnText={this.props.dropdownBtn} items={this.props.dropdownItems} /&
Dropdown 在接收到来自父组件的数据，也是通过
this.props
来访问。这里需要注意父子组件都有
，都能通过
this.props
来访问，父组件是组件内部默认定义的，而子组件的是来自父组件的传递。
在 Dropdown 中使用父组件传递过来的
，将原来的 render 方法稍做改进。
render () {
const displayValue = this.state.visible ? 'block' : 'none';
&div className="dropdown"&
&button className="btn btn-default" onClick={this.onClick}&{this.props.btnText}&/button&
&ul className="dropdown-menu" style={{display: displayValue}}&
this.props.items.map((item) =& (
&li key={`item-{item}`}&
&a href="/react-components-get-started.html"&{item}&/a&
子组件在接受父组件的数据时，可以对数据类型进行校验，并且可以校验数据是否可选，如果传递的数据结果不匹配，React 会给出提示，这对于应用的健壮性来说是一个非常好的设计，建议组件在接收数据的时候最好都能进行数据校验，这样能避免很多因为数据格式问题引起的异常。
需要注意的是，在遍历数组生成结构的时候，都需要加上
, 用于标示该元素的唯一性。
在 Dropdown 的组件中，这些数据都是必须传递的，可以指定校验为必需。
static propTypes = {
// 指定按钮内容是必需的，并且类型为字符串
btnText: React.PropTypes.isRequired.string,
// 指定items的数据是必需的，并且类型为数组
items: React.PropTypes.isRequired.array
更多的数据类型说明，请参见
event 事件
React 有自己实现的事件系统，该事件系统是基于标准 W3C 的 DOM 事件，并在此基础上对事件进行了封装，抹平了不同浏览器之间兼容性差异。为
Virtual DOM
绑定事件，直接在元素上使用驼峰式的属性声明的方式即可。
&button onClick={this.onClick}&{this.props.btnText}&/button&
// event对象也传递给了事件处理函数
onClick = (event) =& {
// console.log(event.type) =& click
this.setState({
visible: !this.state.visible
在事件处理函数中，其
并不指向组件类，可以通过在构造函数中使用
来改变，也可以用最简单的
的箭头函数。
想查看的 React 的事件系统支持哪些类型的事件，或者
对象都包含了哪些可用的属性，可以查看关于
lifecycle 生命周期
React 的组件有几大生命周期，在这些生命周期内，组件本身提供了一些事件接口，这些事件和
Virtual DOM
的事件不一样，是组件本身会触发的事件。
生命周期按照阶段来划分的话，按照先后顺序分为 5 个阶段：
1. 初始化（指定默认的
来初始化组件）；
，装在前和装载完毕都有相应的事件）；
的更新，都会触发相应的事件）；
组件销毁）；
再回到上面的 App 组件中，如果 Dropdown 的数据是依赖于服务器异步数据的话，可以利用组件的生命周期事件来加载数据。
给 App 组件增加一个
componentWillMount
事件，该事件会在组件即将装载的时候触发。
import Dropdown from './dropdown';
class App ponent {
constructor (props) {
super(props);
// 设置一个空的state对象
// 当第一次render的时候，直接使用state不会报错
this.state = {};
componentWillMount () {
// 使用fetch来获取一个数据
fetch('/data')
.then((response) =& response.json())
.then((response) =& {
// 数据加载成功后通过setState改变状态
this.setState({
dropdownBtn: response.dropdownBtn,
dropdownItems: response.dropdownItems
render () {
// 第一次render的时候state并没有数据
// 当数据加载成功调用了setState后才会有数据，这时组件会重新render
&h1&This is a Dropdown demo.&/h1&
btnText={this.state.dropdownBtn}
items={this.state.dropdownItems} /&
App 组件传递给 Dropdown 将原来的静态数据改成了动态数据，所以要将
。Dropdown 组件也需要将原来的数据校验做一些调整。
最终的 Dropdown 完整的代码是下面这样的。
// dropdown.js
class Dropdown ponent {
constructor (props) {
super(props);
this.state = {
visibile: false
static propTypes = {
// 指定按钮内容是必需的，并且类型为字符串
dropdownBtn: React.PropTypes.string,
// 指定items的数据是必需的，并且类型为数组
dropdownItems: React.PropTypes.array
onClick = (event) =& {
// console.log(event.type) =& click
this.setState({
visible: !this.state.visible
render () {
const displayValue = this.state.visible ? 'block' : 'none';
&div className="dropdown"&
&button className="btn btn-default" onClick={this.onClick}&{this.props.btnText}&/button&
&ul className="dropdown-menu" style={{display: displayValue}}&
this.props.items.map((item) =& (
&li key={`item-{item}`}&
&a href="/react-components-get-started.html"&{item}&/a&
而要将组件放到页面中渲染，可以通过
React.render
&div id="root"&&/div&
React.render(
document.getElementById('root')
原载于：雨夜带刀’s Blog
本文链接：
如需转载请以链接形式注明原载或原文地址。
原文地址：, 感谢原作者分享。
您可能感兴趣的代码问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&div className={value.class}&{value.value}&/div&
动态的添加class 这样只能添加一个class如果
&div className={value.class value.class2}&{value.value}&/div&
这样会报错
但是我想要渲染后的结果是
&div class="class1 class2"&谢谢你&/div&
怎么可以做到 还是需要插件？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&div className={value.class + " " + value.class2}&{value.value}&/div&
拼接字符串啊……要不喜欢的话用字符串模板也行啊
&div className={`${value.class} ${value.class2}`}&{value.value}&/div&
花括号里面就是可以运算的部分啊
如果是数组的话直接join也行啊
&div className={classnames.join(" ")}&{value.value}&/div&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
import cs from 'classnames'//引入classnames依赖库
const addClass2 = true
&div className=cs({"class1":true,"class2":addClass2})&{value.value}&/div&
classnames的github地址
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：React快速入门教程 - CNode技术社区
积分: 1175
好好学习，天天向上
Hello React!
轮子来了：JSX
是Facebook开源的一个用于构建用户界面的Javascript库，已经 应用于Facebook及旗下Instagram。
和庞大的不同，React专注于MVC架构中的V，即视图。 这使得React很容易和开发者已有的开发栈进行融合。
React顺应了Web开发组件化的趋势。应用React时，你总是应该从UI出发抽象出不同 的组件，然后像搭积木一样把它们拼装起来：
不过，React定义组件的方式和AngularJS截然不同。如果说HTML是一个轮子，AngularJS 的指令/Directive则是给这个轮子镶了个金边，而React，重新造了个轮子： JSX。
React抛弃HTML另起炉灶的原因之一是性能的考虑：DOM操作非常之慢。React引入了 虚拟DOM的概念：开发者操作虚拟DOM，React在必要的时候将它们渲染到真正的 DOM上 —— 有点像游戏开发中的双缓冲区/Double Buffer帧重绘。
引入虚拟DOM的另一个好处是，容易引入不同的渲染引擎。比如将你的应用代码渲染 到真实的DOM，或者nodejs服务端的无头DOM，或者，iOS/Android平台组件 —— 这就是 React Native ：
Hello React!
和AngularJS相比，上手React简单到让人震惊。
在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：
在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。
在示例代码中使用了React对象的两个方法：
createElement(type,[props],[children…]) - 在虚拟DOM上创建指定的React元素
参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用 字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。 我们在示例中简单的设置为null。
从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到 虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：
var el = React.createElement(
React.createElement(&li&,null,&China&),
React.createElement(&li&,null,&Japan&),
React.createElement(&li&,null,&Korea&)
上面的例子在虚拟DOM中创建了一个具有三个li子元素的ul元素，看起来有点累。不过 想想，造一个轮子，总会付出一些代价的。
在示例中，我们简单地传入了一个文本子元素作为p元素的内容。
render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上
参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法 的执行改变。
callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。
虚拟DOM是React的基石。
之所以引入虚拟DOM，一方面是性能的考虑。Web应用和网站不同，一个Web应用 中通常会在单页内有大量的DOM操作，而这些DOM操作很慢。
在React中，应用程序在虚拟DOM上操作，这让React有了优化的机会。简单说， React在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异， 然后再决定如何最优地更新DOM。这个过程被称为reconciliation。
除了性能的考虑，React引入虚拟DOM更重要的意义是提供了一种一致的开发方 式来开发服务端应用、Web应用和手机端应用：
因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容 渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。
相当棒的思路！
在React中定义一个组件也是相当的容易，组件就是一个 实现预定义接口的JavaScript类：
React.createClass(meta)
参数meta是一个实现预定义接口的JavaScript对象，用来 对React组件原型进行扩展。
在meta中，至少需要实现一个render()方法，而这个方法， 必须而且只能返回一个有效的React元素。
这意味着，如果你的组件是由多个元素构成的，那么你必须在外边包一个顶层 元素，然后返回这个顶层元素。比如我们创建一个布局组件：
render:function(){
return React.createElement(
&div&,null,
React.createElement(&div&,null,&header&),
React.createElement(&div&,null,&content&),
React.createElement(&div&,null,&footer&)
注意 ：你的名称的首字母应当大写， 关于大小写的差异你会在后面发现。
在示例代码中，我们实现了一个液晶显示组件EzLedComp（为了更逼真一些， 定义了简单的样式，别忘了翻看一下），你应该会注意到div元素的样式类是用 className而不是class声明的，这是因为class 是JavaScript的保留字，渲染后，真实的DOM还会是：
&div class=“ez-led”&Hello, React!&/div&
组件定义以后，和标准HTML标签一样，可以使用createElement()方法 创建元素，只是这时，第一个参数是我们定义的组件类，而不是标签名字符串：
React.createElement(EzLedComp);
轮子来了：
React引入虚拟DOM以后，创建DOM树得在JavaScript里写代码，这使得界面定义 变得相当繁琐。比如我们创建两排的液晶组件得这么写：
render: function(){
return React.createElement(
&div&,null,
React.createElement(&div&,{className:&ez-led&},&Hello, React!&),
React.createElement(&div&,{className:&ez-led&},&&)
而它们被渲染后对应的声明式HTML则简单明了：
&div class=&ez-led&&Hello, React!&/div&
&div class=&ez-led&&&/div&
&/div&
这还只是两层的树，要是需要一棵大树呢？
填一个坑，需要挖另一个坑。于是，JSX来了。
JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素。简单的说，每当你需要使用createElement()时， 就把这个函数调用部分用渲染目标HTML替换（提醒下，不完全一致，比如class属性 要用className代替）：
//JavaScript
var e = React.createElement(
&ul&,null,
React.createElement(&li&,null,&China&),
React.createElement(&li&,null,&Japan&),
//JSX = JavaScript + XML like extension
var e = &ul&
&li&China&/li&
&li&Japan&/li&
&/ul&;
说实话，这种写法让代码看起来相当闹心。但相比写大段的脚本来创建DOM树， 这至少效率高吧。好在，不强制使用JSX，如果你是强迫症患者， 确实感觉到不舒服，那么，可以不用它。
很显然，增加了这些XML语法的脚本不能再称为JavaScript了，使用上 略有区别。
指定脚本类型
在html文件中引入的JSX脚本，需要指定类型为text/jsx：
//内联脚本
&script type=&text/jsx&&...&/script&
//外部脚本
&script src=&a.js& type=&text/jsx&&&/script&
引入JSX语法转换库
在html中使用JSX，还需要引入JSX语法转换库JSXTransform.js。 这个库加载后，将在DOM树构造完成后（通过监听DOMContentLoaded事件）处理 JSX脚本：
搜索DOM树中的script节点，如果其类型为text/jsx则进行后续处理
读取script节点的内容，将其转化为JavaScript代码
构造一个新的script元素，设置其内容为转化结果代码，并追加到DOM树head元素中
JSXTransform.js引入后通过全局对象JSXTransformer提供了API接口， 我们可以使用transform()方法来模拟这个语法自动转换的过程。
参考资料：
真心不喜欢
轻看，没有干货
太伤心了。
不喜欢，但是楼主写的很好，思路很清晰
mark,持续关注
Mark, 不错，继续。
写的挺好 :+1:
有种又是一个坑的感觉。
用 angular 的人路过
快入react坑吧:)
我以前也是喜欢新的事物，包括各类框架，现在觉得认真学好事物原理，打好基础，才是有效的掌握一门技术的不二法门！！
自豪地采用
你是如何打基础的?有葵花宝典么?
js代码必须和jsx 一起打包成一个bundle.js 一个简单的todo demo打包出来就接近2m
如果只打包js部分，组件jsx在页面中用标签引入,则提示传递的变量找不到
那光有 础 了，没有 ji 了。活着还有什么意义。
啥意思?我可以邪恶么,呵呵
通过browserify在浏览器中使用node包,是否性能不佳?直接用原生较好?
jsx的代码必须要与其他js一起打包成一个js,否则在 script标签引入jsx的话, render中传入props变量 和初始化读取数据的变量都找不到,我看了一下打包后的bundle.js 代码都被包在闭包里面,外面无法引用 , 按这种方式,简单的demo打包后的bundle.js差不多2m 如果业务复杂以后,打包的js代码可能有8,9m
写得不错啊
不用持续关注，参考资料中的课程就是我写的，只不过是把第一部分摘过来了。
多谢支持！
react的新版本不断发布中，还觉得是坑没有加入？
不错不错！
谢谢鼓励。
我已经叛离 angular 了，使用 React。。。
故事讲得不错，赞，就是没有干货！
O(∩_∩)O哈哈~。
水平有限。。。。o(╯□╰)o。
按这个方式写内容感觉会更清楚
谢谢你的建议。
web应用跟网站区别
确实不错，我看过的讲解react很清晰的
多谢，常交流。
好好学习，天天向上。
你这画风急转啊
是的，要善于打脸才有进步。React 确实比 Angular 好，至少比 1 好。哈哈
mark ，最近正需要用到react,但是团队都在摸索react，还是有点虚·····
初创公司用绝对靠谱。除非是大型运营项目，希望用自己的框架迭代。
也不算太大的坑。
谢谢支持！
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的}