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

rsspub

于 2013-06-04 10:54:14 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React getInitialState this.props this.state this.setState

本文链接：https://blog.youkuaiyun.com/rsspub/article/details/9014837

本文详细讲解React组件如何处理外部参数和定义私有变量。通过getInitialState()初始化私有变量，使用this.state.访问，this.setState()更新。组件实例化时，通过this.props.获取外部参数，如<LikeLink liked={false} />。当变量或参数变化时，render()会重新执行。私有变量不可外部访问或修改，遵循React的State和Props概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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

最低0.47元/天解锁文章