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

发布时间：2020-12-15 04:56:50 所属栏目：百科来源：网络整理

导读：!DOCTYPE htmlhtmlheadmeta http-equiv='Content-type' content='text/html; charset=utf-8'titleReact | Component Data/titlescript src="build/react.min.js"/scriptscript src="build/JSXTransformer.js"/scriptstylea {color:#000; cursor:pointer;}/st

<!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编程中常用的概念名词，不代表是最准确的解释！

您可以修改并重新发布本文，如果您能留下本文的参考连结，万分谢谢！如果您对本文存在疑问，欢迎留言或者直接对本文评论，我会在看到的第一时间回复您。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!