一、什麼是屬性

React官方文件上對於屬性的介紹如下： React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性（Props）來實現功能，但內部細節可能有非常複雜的實現。
React中的每一個元件，都包含有一個屬性（props），屬性主要是從父元件傳遞給子元件的，在元件內部，我們可以通過this.props獲取屬性物件

二、屬性的使用方法

react中主要有下面三種方法來傳遞屬性：

1、直接在元件中使用key/value的形式來指定屬性

下面的程式碼演示瞭如何使用key/value的形式指定屬性：

React.render(
	<HelloWorld name="Jack"/>,
	document.getElementById('container')
);
 

可以看到，在自定義的HelloWorld元件中，我們指定了一個name為Jack的屬性，在元件中，獲取屬性的方法如下程式碼：

var HelloWorld = React.createClass({
	render: function() {
		return (
			<div>Hello, {this.props.name}</div>
		);
	}
});

在{}中，通過this.props.name，就可以獲取到我們指定的name屬性的值了。

2、使用延展屬性為元件指定屬性

如下程式碼所示：

<script type="text/jsx">
	var HelloWorld = React.createClass({
		render: function() {
			return (
				<div>Hello, {this.props.name1}, {this.props.name2}</div>
			);
		}
	});
	var props = {
		name1: 'Jack',
		name2: 'Tom'
	};
	React.render(
		<HelloWorld {...props}/>,
		document.getElementById('container')
	);
</script>
 

為了在HelloWorld元件中定義多個屬性，我們首先定義了一個props物件，裡面包含兩個鍵值對，然後在<HelloWorld>標籤中，用{...props}的方式為元件傳遞了這兩個屬性，這就是JSX中的延展屬性，"..."成為延展操作符，這種方式可以很方便地為元件指定多個屬性，就相當於下面的程式碼：

React.render(
	<HelloWorld name1="Jack" name2="Tom"/>,
	document.getElementById('container')
);

3、通過呼叫元件的setProps函式為元件指定屬性

React.render()函式執行後，會返回代表元件的一個物件，通過呼叫這個物件的setProps函式，可以為其指定屬性，如下程式碼：

<script type="text/jsx">
	var HelloWorld = React.createClass({
		render: function() {
			return (
				<div>Hello, {this.props.name}</div>
			);
		}
	});
	var instance = React.render(
		<HelloWorld />,
		document.getElementById('container')
	);
	instance.setProps({name: 'Jack'});
</script>
 

react官方認為，props應該是隻讀的，不應該被修改。因為 React 不能幫你檢查屬性型別（propTypes）。這樣即使你的 屬性型別有錯誤也不能得到清晰的錯誤提示。
Props 應該被當作禁止修改的。修改 props 物件可能會導致預料之外的結果，所以最好不要去修改 props 物件。