React中的PropTypes是啥意思哇

2021-08-10 12:36:59 字數 1585 閱讀 1485

在我們自己寫了乙個元件,我們需要驗證別人在使用這個元件時,是不是提供了符合我們要求的引數,這時就可以使用元件類的proptypes屬性了。

var mytitle = react.createclass(,

render: function

() });

上面的mytitle元件有乙個title屬性。proptypes 告訴 react,這個 title 屬性是必須的,而且它的值必須是字串。現在,我們設定 title 屬性的值是乙個數值。

var

data = 123;

reactdom.render(

,document.body

);

這樣一來,title屬性就通不過驗證了。控制台會顯示一行錯誤資訊。

warning: failed proptype: invalid proptitleof typenumbersupplied tomytitle, expectedstring.

此外,getdefaultprops 方法可以用來設定元件屬性的預設值。

var mytitle = react.createclass(;

},render: function

() });

reactdom.render(

, document.body

);

上面**會輸出」hello world」。

mycomponent.proptypes = ),

// 你可以用`isrequired`來連線到上面的任何乙個型別,以確保如果沒有提供props的話會顯示乙個警告。

requiredfunc: react.proptypes.func.isrequired,

// 任何資料型別

requiredany: react.proptypes.any.isrequired,

// 您還可以指定自定義型別檢查器。 如果檢查失敗,它應該返回乙個error物件。 不要`console.warn`或throw,因為這不會在`oneoftype`內工作。

customprop: function

(props, propname, componentname)

},// 您還可以為`arrayof`和`objectof`提供自定義型別檢查器。 如果檢查失敗,它應該返回乙個error物件。

// 檢查器將為陣列或物件中的每個鍵呼叫驗證函式。

// 檢查器有兩個引數,第乙個引數是陣列或物件本身,第二個是當前項的鍵。

customarrayprop: react.proptypes.arrayof(function

(propvalue, key, componentname, location, propfullname)

})};

以上內容引用自阮一峰的react 入門例項教程

以及張亞濤的react從入門到精通系列之(13)使用proptypes進行型別檢測

React 資料型別的檢測PropTypes

一 資料檢測的基本型別obj.proptypes 二 通過oneoftype實現多選擇檢測 可規定多個檢測通過的資料型別 proptypes裡的oneoftype方法可以做到這一點,oneoftype方法接收引數的是乙個陣列,陣列元素是你希望檢測通過的資料型別。son.proptypes 三 通過o...

react中的通訊

import react,from react class extends component render data 自定義類名 省略 class extends component render import proptypes from prop types class extends com...

react 動態修改路由 React中的路由設定

在本文中,我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中,我們建立了三個頁面 page 1,page 2,page 3。為了簡化處理,三個頁面的定義類似如下 import react from react function page1 from react r...