您的位置：首页 > Web前端 > React

React中文教程 - Component Data（外部参数及私有变量）

2013-06-04 10:54 218 查看

<!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 = <LikeLink liked={false} />粗体部分，注意false需要用花括号包含；
私有变量只允许在组件内部使用，不要尝试在外部任何地方访问或者修改它；
当私有变量或者参数被更改时，组件的render()就会被执行；

本例子中的私有变量在React官方的解释叫State（状态），而参数则被称为Props（属性）

本文使用“私有变量”和“参数”是根据本人的经验，使用了OOP编程中常用的概念名词，不代表是最准确的解释！

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！

如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航