React高階（七） props屬性

如果需要在元件之間進行傳值，那麼props屬性就起到了這個作用,在react中props和state是兩個非常重要的屬性。

state和props主要區別在於props是不可變的，而state可以根據與使用者互動來改變。這就是為什麼有些容器元件需要定義state來更新和修改資料。 而子元件只能通過props來傳遞資料。

note:屬性是用於設定預設值，不改變的值使用props,改變的值使用state.

每個元件物件都會有props（properties的簡寫）屬性;

元件標籤的所有屬性都儲存在props中;

內部讀取某個屬性值：this.props.propertyname;

作用：通過標籤屬性從元件外向元件內傳遞資料（唯讀read only）;

對props中的屬性值進行型別限制和必要性限制;

person.proptypes =

/>

person.defaultprops =

;

/*

1. 拆分元件: 拆分介面, 抽取元件
* 單個標題元件: welcome
2. 分析確定傳遞資料和資料型別
* welcome: props.name string
*///定義內部標題元件
class welcome extends react.component 
!<
/h2>;}
} welcome.proptypes =
;//定義外部應用元件
render()
key=
/>)}
<
/div>);
}}; var names =
['tom'
,'jack'
,"bob"];
reactdom.
render(/
>
, document.
getelementbyid
('example'))
;

React 元件的三大屬性之props

props的理解 每個元件物件都會有props properties的簡寫 屬性 元件標籤的所有屬性都儲存在props中。props的作用 通過標籤屬性從元件外向元件內傳遞變化的資料 注意點 元件內部不要修改props資料。fun.js import react from react 1.建立元件 ...

React中props傳遞資料

例項 類元件傳遞資料 class hello extends react.component div 接收到的資料 div div reactdom.render 123 age document.queryselector root 函式元件傳遞資料 functionhello props div...

React中state與props比較

state 的主要作用是用於元件儲存 控制 修改自己的可變狀態。state 在元件內部初始化，可以被元件自身修改，而外部不能訪問也不能修改。你可以認為 state 是乙個區域性的 只能被元件自身控制的資料來源。state 中狀態可以通過 this.setstate 方法進行更新，setstate 會...