<!DOCTYPE html> <html> <head> <Meta http-equiv='Content-type' content='text/html; charset=utf-8'> <title>React | Component Data</title> <script src="build/react.min.js"></script> <script src="build/JSXTransformer.js"></script> <style>a {color:#000; cursor:pointer;}</style> </head> <body> <div id="example"></div> <script type="text/jsx"> /** @jsx React.DOM */ var LikeLink = React.createClass({ getInitialState: function() { return {isClicked: false}; },render: function() { // render()函数除了renderComponent()时会被刷新之外，handleClick点击的时候也会被执行哦~ var text = this.props.liked ? '已赞' : '赞一个'; return <a onClick={this.handleClick.bind(this)}>{text}</a>; },handleClick: function() { // 每次点击更改liked属性值 this.props.liked = !this.props.liked; // 每次点击更改isClicked状态值 this.setState({isClicked: !this.state.isClicked}); alert(this.state.isClicked ? 'true' : 'false'); } }); var myLikeLink = <LikeLink liked={false} /> React.renderComponent(myLikeLink,document.getElementById('example')); </script> </body> </html>
这个例子是由http://facebook.github.io/react/docs/component-data.html完善后实现的，我们一步步介绍这个例子是如何使用的，以及React Component是如何接受外部参数和定义私有变量的。
- getInitialState()的返回值定义了该组件所需的全部私有变量，私有变量可以在整个组件内部任何地方使用，获取私有变量使用this.state.[变量名]；
- 需要更改私有变量的值请使用this.setState(变量名,value)函数；
- 当组件需要被实例化时需要接收外部传入参数，在组件内部任何地方使用this.props.[变量名获取]；
- 实例化组件使用XML [KEY=VALUE]的标准属性格式传送，例如var myLikeLink = <LikeLinkliked={false} />粗体部分，注意false需要用花括号包含；
- 私有变量只允许在组件内部使用，不要尝试在外部任何地方访问或者修改它；
- 当私有变量或者参数被更改时，组件的render()就会被执行；
本例子中的私有变量在React官方的解释叫State（状态），而参数则被称为Props（属性）
本文使用“私有变量”和“参数”是根据本人的经验，使用了OOP编程中常用的概念名词，不代表是最准确的解释！
您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！ 如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。
