轉載自點選開啟連結

一、什麼是屬性

React官方文件上對於屬性的介紹如下： React 裡有一個非常常用的模式就是對元件做一層抽象。元件對外公開一個簡單的屬性（Props）來實現功能，但內部細節可能有非常複雜的實現。

React中的每一個元件，都包含有一個屬性（props），屬性主要是從父元件傳遞給子元件的，在元件內部，我們可以通過this.props獲取屬性物件

二、屬性的使用方法

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

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

下面的程式碼演示瞭如何使用key/value的形式指定屬性： [html]  view plain  copy

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

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

1. var HelloWorld = React.createClass({  
2.     render: function() {  
3.         return (  
4.             <div>Hello, {this.props.name}</div>  
5.         );  
6.     }  
7. });  

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

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

如下程式碼所示： [html]  view plain  copy

1. <script type="text/jsx">  
2.     var HelloWorld = React.createClass({  
3.         render: function() {  
4.             return (  
5.                 <div>Hello, {this.props.name1}, {this.props.name2}</div>  
6.             );  
7.         }  
8.     });  
9.     var props = {  
10.         name1: 'Jack',  
11.         name2: 'Tom'  
12.     };  
13.     React.render(  
14.         <HelloWorld {...props}/>,  
15.         document.getElementById('container')  
16.     );  
17. </script>  

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

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

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

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

1. <script type="text/jsx">  
2.     var HelloWorld = React.createClass({  
3.         render: function() {  
4.             return (  
5.                 <div>Hello, {this.props.name}</div>  
6.             );  
7.         }  
8.     });  
9.     var instance = React.render(  
10.         <HelloWorld />,  
11.         document.getElementById('container')  
12.     );  
13.     instance.setProps({name: 'Jack'});  
14. </script>  

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