2.Typechecking With PropTypes(使用propTypes進(jìn)行類(lèi)型檢查)

React版本:15.4.2
**翻譯:xiyoki **

隨著應(yīng)用程序的成長(zhǎng)秃诵,你可以通過(guò)typechecking捕捉很多bug秕狰。對(duì)于某些應(yīng)用程序屏歹,你可以使用Javascript擴(kuò)展(如Flow或TypeScript)來(lái)對(duì)整個(gè)應(yīng)用程序進(jìn)行類(lèi)型檢查认臊。但是即使你不使用這些寨辩,React也有一些內(nèi)置的typechecking能力吓懈。要在組件的props上運(yùn)行typechecking,可以指定特殊的propTypes屬性:

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: React.PropTypes.string
};

React.PropTypes導(dǎo)出一系列驗(yàn)證器靡狞,可用于確保接收的數(shù)據(jù)有效耻警。在這個(gè)例子中,我們正在使用React.PropTypes.string。當(dāng)為prop提供無(wú)效值時(shí)甘穿,Javascript控制臺(tái)中將顯示警告腮恩。出于性能原因,propTypes僅在開(kāi)發(fā)模式下檢查扒磁。

React.PropTypes

這里是一個(gè)示例庆揪,提供了不同的驗(yàn)證器:

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS primitive. By default, these
  // are all optional.
  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol,

  // Anything that can be rendered: numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: React.PropTypes.node,

  // A React element.
  optionalElement: React.PropTypes.element,

  // You can also declare that a prop is an instance of a class. This uses
  // JS's instanceof operator.
  optionalMessage: React.PropTypes.instanceOf(Message),

  // You can ensure that your prop is limited to specific values by treating
  // it as an enum.
  optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

  // An object that could be one of many types
  optionalUnion: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
  ]),

  // An array of a certain type
  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

  // An object with property values of a certain type
  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

  // An object taking on a particular shape
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),

  // You can chain any of the above with `isRequired` to make sure a warning
  // is shown if the prop isn't provided.
  requiredFunc: React.PropTypes.func.isRequired,

  // A value of any data type
  requiredAny: React.PropTypes.any.isRequired,

  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don't `console.warn` or throw, as this
  // won't work inside `oneOfType`.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // You can also supply a custom validator to `arrayOf` and `objectOf`.
  // It should return an Error object if the validation fails. The validator
  // will be called for each key in the array or object. The first two
  // arguments of the validator are the array or object itself, and the
  // current item's key.
  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

Requiring Single Child(需要單獨(dú)的child)

對(duì)于React.PropTypes.element,你可以指定只有一個(gè)單獨(dú)的child作為children被傳遞給組件妨托。

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: React.PropTypes.element.isRequired
};

Default Prop Values(默認(rèn)的Prop值)

你可以為你的props定義默認(rèn)的值缸榛,通過(guò)將特殊的defaultProps屬性賦給props

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

// Renders "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

defaultProps將被用于確保this.props.name有一個(gè)值,如果它的值不是由父組件指定兰伤。當(dāng)defaultProps被處理后内颗,propTypes類(lèi)型檢查將會(huì)進(jìn)行,所以類(lèi)型檢查也將適用于defaultProps敦腔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末均澳,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子符衔,更是在濱河造成了極大的恐慌找前,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,865評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件判族,死亡現(xiàn)場(chǎng)離奇詭異躺盛,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)形帮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,296評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)槽惫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人辩撑,你說(shuō)我怎么就攤上這事界斜。” “怎么了合冀?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,631評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵各薇,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我君躺,道長(zhǎng)峭判,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,199評(píng)論 1 300
  • 正文 為了忘掉前任晰洒,我火速辦了婚禮朝抖,結(jié)果婚禮上啥箭,老公的妹妹穿的比我還像新娘谍珊。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,196評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布砌滞。 她就那樣靜靜地躺著侮邀,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贝润。 梳的紋絲不亂的頭發(fā)上绊茧,一...
    開(kāi)封第一講書(shū)人閱讀 52,793評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音打掘,去河邊找鬼华畏。 笑死,一個(gè)胖子當(dāng)著我的面吹牛尊蚁,可吹牛的內(nèi)容都是我干的亡笑。 我是一名探鬼主播,決...
    沈念sama閱讀 41,221評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼横朋,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼仑乌!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起琴锭,我...
    開(kāi)封第一講書(shū)人閱讀 40,174評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤晰甚,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后决帖,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體厕九,經(jīng)...
    沈念sama閱讀 46,699評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,770評(píng)論 3 343
  • 正文 我和宋清朗相戀三年古瓤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了止剖。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,918評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡落君,死狀恐怖穿香,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情绎速,我是刑警寧澤皮获,帶...
    沈念sama閱讀 36,573評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站纹冤,受9級(jí)特大地震影響洒宝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜萌京,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,255評(píng)論 3 336
  • 文/蒙蒙 一雁歌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧知残,春花似錦靠瞎、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,749評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)佳窑。三九已至,卻和暖如春父能,著一層夾襖步出監(jiān)牢的瞬間神凑,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,862評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工何吝, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉委,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,364評(píng)論 3 379
  • 正文 我出身青樓爱榕,卻偏偏與公主長(zhǎng)得像薛躬,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子呆细,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,926評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容