React学习入门实例

上节中接触的react hello world例子中引用了三个框架脚本文件，react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

注意：browser.js这个和那个开源的bowser.js不一样，那个是用来检测浏览器的小脚本，和BOWSER.JS也不一样，那个是一个JS 3D网页游戏开发的库，和bower也不一样，那个是一个包管理工具，这些名字呀，老纳也是醉了。

这是一个timer计时器的官方例子，直接把组件加到body里，整个源码：

<!DOCTYPE html>@H_403_11@
<html@H_403_11@ lang@H_403_11@="zh-cn"@H_403_11@>@H_403_11@
<head@H_403_11@>@H_403_11@
    <Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@>@H_403_11@
    <title@H_403_11@>@H_403_11@Document</title@H_403_11@>@H_403_11@
    <style@H_403_11@>@H_403_11@ * { padding@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; margin@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ html@H_403_11@{ font@H_403_11@:14@H_403_11@px normal Arial,sans-serif@H_403_11@@H_403_11@; color@H_403_11@:#626771@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ body@H_403_11@{ padding@H_403_11@:60@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: center@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ @H_403_11@</style@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react-dom.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../browser.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</head@H_403_11@>@H_403_11@
<body@H_403_11@>@H_403_11@
    <script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ var@H_403_11@ TimerExample = React.createClass({ getInitialState: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ { elapsed: 0@H_403_11@ }; },componentDidMount: function@H_403_11@()@H_403_11@{@H_403_11@ this@H_403_11@.timer = setInterval(this@H_403_11@.tick,50@H_403_11@); },componentWillUnmount: function@H_403_11@()@H_403_11@{@H_403_11@ clearInterval(this@H_403_11@.timer); },tick: function@H_403_11@()@H_403_11@{@H_403_11@ this@H_403_11@.setState({elapsed: new@H_403_11@ Date@H_403_11@() - this@H_403_11@.props.start}); },render: function@H_403_11@()@H_403_11@ {@H_403_11@ var@H_403_11@ elapsed = Math@H_403_11@.round(this@H_403_11@.state.elapsed / 100@H_403_11@); var@H_403_11@ seconds = (elapsed / 10@H_403_11@).toFixed(1@H_403_11@); return@H_403_11@ <p@H_403_11@>@H_403_11@This example was started <b@H_403_11@>@H_403_11@{seconds} seconds</b@H_403_11@>@H_403_11@ ago.</p@H_403_11@>@H_403_11@;@H_403_11@ } }); React.render( <TimerExample@H_403_11@ start@H_403_11@={Date.now()}@H_403_11@ />@H_403_11@,document.body ); @H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</body@H_403_11@>@H_403_11@
</html@H_403_11@>@H_403_11@

定义了一个组件TimerExample ，里面componentDidMount和componentWillUnmount是五个事件中的其中两个，分别表示组件加载完成和组件将被卸载，这里用来初始化计时器和清除计时器。getInitialState设置了一个变量elapsed 初始值为0，计时器每隔50ms执行一次tick方法，设置elapsed 为当前时间减去初始时间，初始时间被定义成了组件的属性start，在组件里获取属性的方式是通过this.props，render返回了格式化的HTML，秒数被格式化保留一位小数。

这个例子很容易理解，里面组件的定义，数据的处理，组件如何被使用都很清楚。

再看一个导航菜单的例子：

<!DOCTYPE html>@H_403_11@
<html@H_403_11@ lang@H_403_11@="en"@H_403_11@>@H_403_11@
<head@H_403_11@>@H_403_11@
    <Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@>@H_403_11@
    <title@H_403_11@>@H_403_11@Document</title@H_403_11@>@H_403_11@
    <style@H_403_11@>@H_403_11@ * { padding@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; margin@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ html@H_403_11@{ font@H_403_11@:14@H_403_11@px normal Arial,sans-serif@H_403_11@@H_403_11@; color@H_403_11@:#626771@H_403_11@@H_403_11@@H_403_11@; background-color@H_403_11@:#fff@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ body@H_403_11@{ padding@H_403_11@:60@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: center@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@{ list-style@H_403_11@:none@H_403_11@@H_403_11@; display@H_403_11@: inline-block@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@{ display@H_403_11@: inline-block@H_403_11@@H_403_11@; padding@H_403_11@: 10@H_403_11@px 20@H_403_11@px@H_403_11@@H_403_11@; cursor@H_403_11@:pointer@H_403_11@@H_403_11@; background-color@H_403_11@:#eee@H_403_11@@H_403_11@@H_403_11@; color@H_403_11@:#7B8585@H_403_11@@H_403_11@@H_403_11@; transition@H_403_11@:0.3@H_403_11@s@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@:hover@H_403_11@{ background-color@H_403_11@:#beecea@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@.focused@H_403_11@{ color@H_403_11@:#fff@H_403_11@@H_403_11@@H_403_11@; background-color@H_403_11@:#41c7c2@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ p@H_403_11@{ padding-top@H_403_11@:15@H_403_11@px@H_403_11@@H_403_11@; font-size@H_403_11@:12@H_403_11@px@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ @H_403_11@</style@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react-dom.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../browser.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</head@H_403_11@>@H_403_11@
<body@H_403_11@>@H_403_11@
    <script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ var@H_403_11@ MenuExample = React.createClass({ getInitialState: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ { focused: 0@H_403_11@ }; },clicked: function@H_403_11@(index)@H_403_11@{@H_403_11@ this@H_403_11@.setState({focused: index}); },render: function@H_403_11@()@H_403_11@ {@H_403_11@ var@H_403_11@ self = this@H_403_11@; return@H_403_11@ ( <div@H_403_11@>@H_403_11@ <ul@H_403_11@>@H_403_11@{ this.props.items.map(function(m,index){ var style = ''; if(self.state.focused == index){ style = 'focused'; } return <li@H_403_11@ className@H_403_11@={style}@H_403_11@ onClick@H_403_11@={self.clicked.bind(self,@H_403_11@ index@H_403_11@)}>@H_403_11@{m}</li@H_403_11@>@H_403_11@;@H_403_11@ }) } </ul> <p>Selected: {this.props.items[this.state.focused]}</@H_403_11@p> </div@H_403_11@>@H_403_11@ ); } }); React.render( <MenuExample@H_403_11@ items@H_403_11@={@H_403_11@ ['Home@H_403_11@','Services@H_403_11@','About@H_403_11@','Contact@H_403_11@ us@H_403_11@'] } />@H_403_11@,document.body ); @H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</body@H_403_11@>@H_403_11@
</html@H_403_11@>@H_403_11@

这个导航菜单使用一个变量focused来标记选中的是哪一个，虽然很原始，但扩展一下就可以在项目里用了，哈哈。

搜索智能提示

<!DOCTYPE html>@H_403_11@
<html@H_403_11@ lang@H_403_11@="en"@H_403_11@>@H_403_11@
<head@H_403_11@>@H_403_11@
    <Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@>@H_403_11@
    <title@H_403_11@>@H_403_11@Document</title@H_403_11@>@H_403_11@
    <style@H_403_11@>@H_403_11@ * { padding@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; margin@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ html@H_403_11@{ font@H_403_11@:14@H_403_11@px normal Arial,sans-serif@H_403_11@@H_403_11@; color@H_403_11@:#626771@H_403_11@@H_403_11@@H_403_11@; background-color@H_403_11@:#fff@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ body@H_403_11@{ padding@H_403_11@:60@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: center@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ input@H_403_11@[type=text]@H_403_11@{ text-align@H_403_11@: center@H_403_11@@H_403_11@; font@H_403_11@: inherit@H_403_11@@H_403_11@; border@H_403_11@: 6@H_403_11@px solid #a3d8d6@H_403_11@@H_403_11@@H_403_11@; padding@H_403_11@: 13@H_403_11@px 12@H_403_11@px@H_403_11@@H_403_11@; font-size@H_403_11@: 15@H_403_11@px@H_403_11@@H_403_11@; Box-shadow@H_403_11@: 0@H_403_11@ 1@H_403_11@px 1@H_403_11@px #DDD@H_403_11@@H_403_11@@H_403_11@; width@H_403_11@: 384@H_403_11@px@H_403_11@@H_403_11@; outline@H_403_11@: none@H_403_11@@H_403_11@; display@H_403_11@: block@H_403_11@@H_403_11@; color@H_403_11@: #7B8585@H_403_11@@H_403_11@@H_403_11@; margin@H_403_11@: 0@H_403_11@ auto 20@H_403_11@px@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@{ list-style@H_403_11@: none@H_403_11@@H_403_11@; display@H_403_11@: inline-block@H_403_11@@H_403_11@; width@H_403_11@: 420@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: left@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@{ display@H_403_11@: block@H_403_11@@H_403_11@; padding@H_403_11@: 15@H_403_11@px 20@H_403_11@px@H_403_11@@H_403_11@; background-color@H_403_11@: #F8F8F8@H_403_11@@H_403_11@@H_403_11@; color@H_403_11@: #7B8585@H_403_11@@H_403_11@@H_403_11@; margin-bottom@H_403_11@: 3@H_403_11@px@H_403_11@@H_403_11@; position@H_403_11@: relative@H_403_11@@H_403_11@; transition@H_403_11@: 0.3@H_403_11@s@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@ a@H_403_11@{ position@H_403_11@: absolute@H_403_11@@H_403_11@; left@H_403_11@: 160@H_403_11@px@H_403_11@@H_403_11@; font-size@H_403_11@: 12@H_403_11@px@H_403_11@@H_403_11@; line-height@H_403_11@: 16@H_403_11@px@H_403_11@@H_403_11@; color@H_403_11@: #969d9d@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ ul@H_403_11@ li@H_403_11@:hover@H_403_11@{ background-color@H_403_11@:#d8f2f1@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ @H_403_11@</style@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react-dom.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../browser.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</head@H_403_11@>@H_403_11@
<body@H_403_11@>@H_403_11@
    <script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ var@H_403_11@ SearchExample = React.createClass({ getInitialState: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ { searchString: ''@H_403_11@ }; },handleChange: function@H_403_11@(e)@H_403_11@{@H_403_11@ this@H_403_11@.setState({searchString:e.target.value}); },render: function@H_403_11@()@H_403_11@ {@H_403_11@ var@H_403_11@ libraries = this@H_403_11@.props.items,searchString = this@H_403_11@.state.searchString.trim().toLowerCase(); if@H_403_11@(searchString.length > 0@H_403_11@){ libraries = libraries.filter(function@H_403_11@(l)@H_403_11@{@H_403_11@ return@H_403_11@ l.name.toLowerCase().match( searchString ); }); } return@H_403_11@ <div@H_403_11@>@H_403_11@ <input@H_403_11@ type@H_403_11@="text"@H_403_11@ value@H_403_11@={this.state.searchString}@H_403_11@ onChange@H_403_11@={this.handleChange}@H_403_11@ placeholder@H_403_11@="Type here"@H_403_11@ />@H_403_11@ <ul@H_403_11@>@H_403_11@ { libraries.map(function(l){ return <li@H_403_11@>@H_403_11@{l.name} <a@H_403_11@ href@H_403_11@={l.url}@H_403_11@>@H_403_11@{l.url}</a@H_403_11@>@H_403_11@</li@H_403_11@>@H_403_11@ }) } </ul@H_403_11@>@H_403_11@ </div@H_403_11@>@H_403_11@;@H_403_11@ } }); var@H_403_11@ libraries = [ { name: 'Backbone.js'@H_403_11@,url: 'http://documentcloud.github.io/backbone/'@H_403_11@},{ name: 'AngularJS'@H_403_11@,url: 'https://angularjs.org/'@H_403_11@},{ name: 'jQuery'@H_403_11@,url: 'http://jquery.com/'@H_403_11@},{ name: 'Prototype'@H_403_11@,url: 'http://www.prototypejs.org/'@H_403_11@},{ name: 'React'@H_403_11@,url: 'http://facebook.github.io/react/'@H_403_11@},{ name: 'Ember'@H_403_11@,url: 'http://emberjs.com/'@H_403_11@},{ name: 'Knockout.js'@H_403_11@,url: 'http://knockoutjs.com/'@H_403_11@},{ name: 'Dojo'@H_403_11@,url: 'http://dojotoolkit.org/'@H_403_11@},{ name: 'Mootools'@H_403_11@,url: 'http://mootools.net/'@H_403_11@},{ name: 'Underscore'@H_403_11@,url: 'http://documentcloud.github.io/underscore/'@H_403_11@},{ name: 'Lodash'@H_403_11@,url: 'http://lodash.com/'@H_403_11@},{ name: 'Moment'@H_403_11@,url: 'http://momentjs.com/'@H_403_11@},{ name: 'Express'@H_403_11@,url: 'http://expressjs.com/'@H_403_11@},{ name: 'Koa'@H_403_11@,url: 'http://koajs.com/'@H_403_11@} ]; React.render( <SearchExample@H_403_11@ items@H_403_11@={@H_403_11@ libraries@H_403_11@ } />@H_403_11@,document.body ); @H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</body@H_403_11@>@H_403_11@
</html@H_403_11@>@H_403_11@

就一个handleChange和filter就简单地实现了强大的过滤功能，react真的挺好用的。

表格计算

<!DOCTYPE html>@H_403_11@
<html@H_403_11@ lang@H_403_11@="en"@H_403_11@>@H_403_11@
<head@H_403_11@>@H_403_11@
    <Meta@H_403_11@ charset@H_403_11@="UTF-8"@H_403_11@>@H_403_11@
    <title@H_403_11@>@H_403_11@Document</title@H_403_11@>@H_403_11@
    <style@H_403_11@>@H_403_11@ * { padding@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; margin@H_403_11@:0@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ html@H_403_11@{ font@H_403_11@:14@H_403_11@px normal Arial,sans-serif@H_403_11@@H_403_11@; color@H_403_11@:#626771@H_403_11@@H_403_11@@H_403_11@; background-color@H_403_11@:#fff@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ body@H_403_11@{ padding@H_403_11@:60@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: center@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ h1@H_403_11@{ font-size@H_403_11@:18@H_403_11@px@H_403_11@@H_403_11@; margin-bottom@H_403_11@:20@H_403_11@px@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@{ list-style@H_403_11@: none@H_403_11@@H_403_11@; display@H_403_11@: inline-block@H_403_11@@H_403_11@; width@H_403_11@: 340@H_403_11@px@H_403_11@@H_403_11@; text-align@H_403_11@: left@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@ p@H_403_11@{ display@H_403_11@: block@H_403_11@@H_403_11@; padding@H_403_11@: 15@H_403_11@px 20@H_403_11@px@H_403_11@@H_403_11@; background-color@H_403_11@: #F8F8F8@H_403_11@@H_403_11@@H_403_11@; color@H_403_11@: #7B8585@H_403_11@@H_403_11@@H_403_11@; margin-bottom@H_403_11@: 3@H_403_11@px@H_403_11@@H_403_11@; position@H_403_11@: relative@H_403_11@@H_403_11@; cursor@H_403_11@: pointer@H_403_11@@H_403_11@; transition@H_403_11@: 0.3@H_403_11@s@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@ p@H_403_11@ b@H_403_11@{ position@H_403_11@: absolute@H_403_11@@H_403_11@; right@H_403_11@: 28@H_403_11@px@H_403_11@@H_403_11@; line-height@H_403_11@: 16@H_403_11@px@H_403_11@@H_403_11@; width@H_403_11@: 100@H_403_11@px@H_403_11@@H_403_11@; color@H_403_11@: #808787@H_403_11@@H_403_11@@H_403_11@; text-align@H_403_11@: right@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@ p@H_403_11@:hover@H_403_11@{ background-color@H_403_11@:#d8f2f1@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@ p@H_403_11@.active@H_403_11@{ color@H_403_11@:#fff@H_403_11@@H_403_11@@H_403_11@; background-color@H_403_11@:#41c7c2@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #services@H_403_11@ p@H_403_11@.active@H_403_11@ b@H_403_11@{ color@H_403_11@: #fff@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ #total@H_403_11@{ background@H_403_11@: none !important@H_403_11@@H_403_11@@H_403_11@; cursor@H_403_11@: default !important@H_403_11@@H_403_11@@H_403_11@; padding-top@H_403_11@: 10@H_403_11@px !important@H_403_11@@H_403_11@@H_403_11@; }@H_403_11@@H_403_11@ @H_403_11@</style@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../react-dom.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
    <script@H_403_11@ src@H_403_11@="../browser.min.js"@H_403_11@>@H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</head@H_403_11@>@H_403_11@
<body@H_403_11@>@H_403_11@
    <script@H_403_11@ type@H_403_11@="text/babel"@H_403_11@>@H_403_11@ var@H_403_11@ ServiceChooser = React.createClass({ getInitialState: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ { total: 0@H_403_11@ }; },addTotal: function@H_403_11@( price )@H_403_11@{@H_403_11@ this@H_403_11@.setState( { total: this@H_403_11@.state.total + price } ); },render: function@H_403_11@()@H_403_11@ {@H_403_11@ var@H_403_11@ self = this@H_403_11@; var@H_403_11@ services = this@H_403_11@.props.items.map(function@H_403_11@(s)@H_403_11@{@H_403_11@ return@H_403_11@ <Service@H_403_11@ name@H_403_11@={s.name}@H_403_11@ price@H_403_11@={s.price}@H_403_11@ active@H_403_11@={s.active}@H_403_11@ addTotal@H_403_11@={self.addTotal}@H_403_11@ />@H_403_11@;@H_403_11@ }); return@H_403_11@ <div@H_403_11@>@H_403_11@ <h1@H_403_11@>@H_403_11@Our services</h1@H_403_11@>@H_403_11@ <div@H_403_11@ id@H_403_11@="services"@H_403_11@>@H_403_11@ {services} <p@H_403_11@ id@H_403_11@="total"@H_403_11@>@H_403_11@Total <b@H_403_11@>@H_403_11@${this.state.total.toFixed(2)}</b@H_403_11@>@H_403_11@</p@H_403_11@>@H_403_11@ </div@H_403_11@>@H_403_11@ </div@H_403_11@>@H_403_11@;@H_403_11@ } }); var@H_403_11@ Service = React.createClass({ getInitialState: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ { active: false@H_403_11@ }; },clickHandler: function@H_403_11@ ()@H_403_11@{@H_403_11@ var@H_403_11@ active = !this@H_403_11@.state.active; this@H_403_11@.setState({ active: active }); this@H_403_11@.props.addTotal( active ? this@H_403_11@.props.price : -this@H_403_11@.props.price ); },render: function@H_403_11@()@H_403_11@{@H_403_11@ return@H_403_11@ <p@H_403_11@ className@H_403_11@={@H_403_11@ this.state.active@H_403_11@ ? 'active@H_403_11@' :@H_403_11@ '' } onClick@H_403_11@={this.clickHandler}@H_403_11@>@H_403_11@ {this.props.name} <b@H_403_11@>@H_403_11@${this.props.price.toFixed(2)}</b@H_403_11@>@H_403_11@ </p@H_403_11@>@H_403_11@;@H_403_11@ } }); var@H_403_11@ services = [ { name: 'Web Development'@H_403_11@,price: 300@H_403_11@ },{ name: 'Design'@H_403_11@,price: 400@H_403_11@ },{ name: 'Integration'@H_403_11@,price: 250@H_403_11@ },{ name: 'Training'@H_403_11@,price: 220@H_403_11@ } ]; React.render( <ServiceChooser@H_403_11@ items@H_403_11@={@H_403_11@ services@H_403_11@ } />@H_403_11@,document.body ); @H_403_11@@H_403_11@</script@H_403_11@>@H_403_11@
</body@H_403_11@>@H_403_11@
</html@H_403_11@>@H_403_11@

这个例子演示了两个组件怎么配合使用，ServiceChooser 使用了Service组件，一个Service 相当于一行，而ServiceChooser 是Service的组合，根据click事件和state.active来控制总量的计算。

以上示例均来自官方，代码整合到一个html文件中，直接运行就可见效果。

React学习入门实例

表格计算

猜你在找的React相关文章