React自定義PropTypes

liaoyg8023 發(fā)布于2019-08-21 15:34 / 2054人閱讀

http://stackoverflow.com/ques...

// 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("Validation failed!");
  }
}

How type checkers work

function(props, propName, componentName, location, propFullName) => null | Error

PropTypes.number({ myProp: "bad" }, "myProp");
// => [Error: Invalid undefined `myProp` of type `string` supplied
//     to `<>`, expected `number`.]

PropTypes.number({ myProp: "bad" }, "myProp", "MyComponent", "prop")
// => [Error: Invalid prop `myProp` of type `string` supplied
//     to `MyComponent`, expected `number`.]


const minMaxPropType = (props, propName, componentName, ...rest) => {
  const error = PropTypes.number(props, propName, componentName, ...rest);
  if (error !== null) {
    return error;
  }

  if (props.min >= props.max) {
    const errorMsg = (propName === "min") ? "min should be less than max" : "max should be greater than min";
    return new Error(errorMsg);
  }
};

GPU云服務(wù)器云服務(wù)器自定義頭像自定義網(wǎng)站自定義自定義按鈕

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88236.html

相關(guān)文章

【全棧React】第8天: 屬性類型

摘要：在大多數(shù)情況下，我們期望這些是一種特定類型或一組類型也稱為或。例如，幾天前我們構(gòu)建的組件接受一個(gè)稱為的屬性，我們期望它是一個(gè)字符串。必需類型可以通過(guò)在任意個(gè)屬性類型中附加中描述來(lái)將需要傳遞給一個(gè)組件根據(jù)需要設(shè)置是非常有用的。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3818原文：https://www.fullstackr...

codeKK 2019-08-20 18:33 評(píng)論0 收藏0
React中組件通信的幾種方式

摘要：首次發(fā)表在個(gè)人博客需要組件之進(jìn)行通信的幾種情況父組件向子組件通信子組件向父組件通信跨級(jí)組件通信沒(méi)有嵌套關(guān)系組件之間的通信父組件向子組件通信數(shù)據(jù)流動(dòng)是單向的父組件向子組件通信也是最常見(jiàn)的父組件通過(guò)向子組件傳遞需要的信息子組件向父組件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 評(píng)論0 收藏0
react開(kāi)發(fā)教程（四）React數(shù)據(jù)流

摘要：在中，數(shù)據(jù)是自頂向下流動(dòng)的稱為單項(xiàng)數(shù)據(jù)流，從父組件傳遞到子組件。任何數(shù)據(jù)類型您還可以指定自定義類型檢查器。如果檢查失敗，它應(yīng)該返回一個(gè)對(duì)象。不要或，因?yàn)檫@不會(huì)在內(nèi)工作。檢查器有兩個(gè)參數(shù)，第一個(gè)參數(shù)是數(shù)組或?qū)ο蟊旧?，第二個(gè)是當(dāng)前項(xiàng)的鍵。在React中，數(shù)據(jù)是自頂向下流動(dòng)的（稱為單項(xiàng)數(shù)據(jù)流），從父組件傳遞到子組件。因此組件是簡(jiǎn)單且易于把握的，它們只需從父節(jié)點(diǎn)獲取props渲染即可。如果頂...

CatalpaFlat 2019-08-20 15:57 評(píng)論0 收藏0
玩轉(zhuǎn) React（四）- 創(chuàng)造一個(gè)新的 HTML 標(biāo)簽

摘要：屬性是一個(gè)組件的外部輸入。只會(huì)在開(kāi)發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開(kāi)銷，類型檢查將會(huì)被略過(guò)。某個(gè)類的實(shí)例枚舉，屬性值必須為其中的某一個(gè)值。屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。在第二篇文章《新型前端開(kāi)發(fā)方式》中有說(shuō)到 React 有很爽的一點(diǎn)就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...

soasme 2019-08-01 17:46 評(píng)論0 收藏0
玩轉(zhuǎn) React（四）- 創(chuàng)造一個(gè)新的 HTML 標(biāo)簽

摘要：屬性是一個(gè)組件的外部輸入。只會(huì)在開(kāi)發(fā)模式下進(jìn)行屬性類型檢查，當(dāng)代碼進(jìn)行生產(chǎn)發(fā)布后，為了減少額外的性能開(kāi)銷，類型檢查將會(huì)被略過(guò)。某個(gè)類的實(shí)例枚舉，屬性值必須為其中的某一個(gè)值。屬性為一個(gè)數(shù)組，且數(shù)組中的元素必須符合指定類型。在第二篇文章《新型前端開(kāi)發(fā)方式》中有說(shuō)到 React 有很爽的一點(diǎn)就是給我們一種創(chuàng)造 HTML 標(biāo)簽的能力，那么今天這篇文章就詳細(xì)講解下 React 是如何提供這...

dendoink 2019-08-21 16:58 評(píng)論0 收藏0