this.props

在React中,可以通过this.props来传递参数,看下面的例子:

var OuterComponent = React.createClass({
	render: function(){
		return (
			<div className="outer">
				<InnerComponent name="Alex">
					This is a message
				</InnerComponent>
				<InnerComponent name="Bebe">
					<span>first message</span><br />
					<span>second message</span>
				</InnerComponent>
			</div>
		);
	}
});

var InnerComponent = React.createClass({
	render: function(){
		return (
			<div className="inner">
				<h2>{this.props.name}</h2>
				<p>{this.props.children}</p>
			</div>
		);
	}
});

React.render(
	<OuterComponent />,
	document.getElementById("example")
);

通常情况下,参数往往是在外层组件中传入,在内层组件的实现中获得。其实非常类似于构造函数的传参,例如 InnerComponent的“构造函数”(render)接受两个参数:namechildren,在OuterComponent 中,创建了两个InnerComponent的实例,并向它们提供namechildren的值。

this.props是一个对象,所有声明的属性都会包含在这个对象中,另外该对象有一个children属性, 其值是一个数组,表示的是该元素的所有子元素。

this.state

this.props常用来传递相对固定的属性值,即值一旦确定下来基本上就不会再改变。对于那些会动态变化的值, 更好的方法是使用this.state,例如:

var Component = React.createClass({
	getInitialState: function(){
		return {name: "Unknown"};
	},
	componentDidMount: function(){
		setTimeout(function(){
			this.setState({name: "Alex"});
		}.bind(this), 2000);
	},
	render: function(){
		return (
			<div>
				<strong>Name: </strong>
				<span>{this.state.name}</span>
			</div>
		);
	}
});

React.render(
	<Component />,
	document.getElementById("example")
);

通过getInitialState()来初始化state的值,后续的操作、事件等可能会动态地改变state的值,一旦state改变, 相应的DOM就会更新。需要注意的是this.setState并非是改变了原来state对象的指向,而是在原来state的身上做一个 extend操作。

this.refs

通过this.refs可以查找相应的DOM对象,例如:

var Component = React.createClass({
	handleChange: function(e){
		var user = React.findDOMNode(this.refs.user);
		var name = React.findDOMNode(this.refs.name);
		name.innerHTML = user.value;
	},
	render: function(){
		return (
			<div>
				<input type="text" ref="user" placeholder="You name" onChange={this.handleChange} />
				<p>Hello <span ref="name"></span></p>
			</div>
		);
	}
});

React.render(
	<Component />,
	document.getElementById("example")
);

通过给标签添加ref属性,然后通过this.refs可以找到该标签的引用,然后通过React.findDOMNode()方法即可得到原生的DOM对象。

参考