初識React(6)：propTypes類型檢測

Brenner 發布于2019-08-23 11:33 / 2392人閱讀

摘要：是中用來對參數進行類型檢測的，當然要使用這個插件，得先安裝這個插件，如下但是如果你是直接用創建的項目，無需安裝，直接引入即可，如下上面那個例子中可以看出，要引入組件，必須得傳入參數類型為字符串的參數，否則會報錯常用的數據類型檢測如下

propTypes是react中用來對參數進行類型檢測的，當然要使用這個插件，得先安裝這個插件，如下：

npm install prop-types --save

但是如果你是直接用dva創建的項目，無需安裝，直接引入即可，如下：

import React from "react";
import PropTypes from "prop-types";

class PropType extends React.Component {
   render() {
     return (
       
        123
        {this.props.content}
       
     )
   }
}

PropType.propTypes = {
  content:PropTypes.string.isRequired
}
export default PropType;

上面那個例子中可以看出，要引入組件PropType，必須得傳入參數類型為字符串的content參數，否則會報錯

import React from "react";
import { connect } from "dva";
import PropType from "./propTypes/propTypes.js"

function IndexPage() {
  return (
    
      
    
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

PropTypes常用的數據類型檢測如下：

字符串類型PropTypes.string

布爾類型PropTypes.bool

函數類型PropTypes.func

數組類型PropTypes.array

數字類型PropTypes.number

對象類型PropTypes.object

元素PropTypes.element

傳入任何東西都可以PropTypes.node

選擇特定值PropTypes.oneOf(["是", "否", "是否"])

選擇諸多類型中的一種（任意類型）PropTypes.oneOfType：

PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number
  ]),

11.具有某種類型的數組PropTypes.arrayOf(PropTypes.number)：

PropTypes.arrayOf(PropTypes.number)

12.具有某種類型屬性值的對象PropTypes.objectOf(React.PropTypes.number)

PropTypes.objectOf(React.PropTypes.number)

13.樣式類型PropTypes.shape

PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  })

14.任何數據類型PropTypes.any.isRequired

注意： isRequired表示必要的參數，如果設置了isRequired沒有參數傳過來，則會報錯

PropTypes比較常用的應該就是以上那些類型了，如果后期有新發現會不間斷更新文章。

GPU云服務器云服務器類型檢測 PropTypes js中的6大數據類型以及應用 java 檢測類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97130.html

初識redux

摘要：主要用于構建，很多人認為是中的視圖。函數接受另一個函數作為參數，返回新生成的對象的變化，會導致的變化。用戶無法直接改變只能觸發上綁定的事件。表示應該要發生變化了。允許使用方法設置監聽函數，一旦發生變化，就自動執行這個函數。什么是react React 是一個用于構建用戶界面的 JAVASCRIPT 庫。React主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。...

xumenger 2019-08-22 16:13 評論0 收藏0
React系列---React（二）組件的prop和state

摘要：給賦值也是構造函數的工作之一。在的構造函數中，還給兩個成員函數綁定了當前的執行環境，因為方式創建的組件并不自動給我們綁定到當前實例對象。我們可以利用的功能，避免判斷邏輯這種充斥在構造函數之中，讓代碼更優。 React系列---React（一）初識ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期組件是React...

Labradors 2019-08-20 17:33 評論0 收藏0
基于 react, redux 最佳實踐構建的 2048

摘要：最佳實踐一個文件一個組件。，這是包含的是無副作用的純函數式計算狀態操作的函數。，的啟動腳本，啟動開發模式，項目打包，運行單元測試等等。每次代碼推送到之前也會執行所有單元測試用例，全部通過才可以繼續推送。，首次安裝依賴包之后生成的文件。前段時間 React license 的問題鬧的沸沸揚揚，搞得 React 社區人心惶惶，好在最終 React 團隊聽取了社區意見把 license 換...

Eidesen 2019-08-21 17:00 評論0 收藏0
前端面試日記（二）

摘要：面試時間晚上時長小時分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時都是怎么學習前端的學習前端的話，我主要是以書籍為主然后是網站視頻博客文檔等學習理論，之后再通過代碼實踐。。。大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時間，剛開始說是13號晚上7點；后面可能時間有變，中午來了個電話說改到9-10點；怎么說算是第一次面試自己目標公司之一吧...

huayeluoliuhen 2019-08-02 16:02 評論0 收藏0
前端面試日記（二）

摘要：面試時間晚上時長小時分鐘公司，一面一簡單的介紹下自己介紹的真的很簡單。。。。。。二平時都是怎么學習前端的學習前端的話，我主要是以書籍為主然后是網站視頻博客文檔等學習理論，之后再通過代碼實踐。。。大概是在6月11號在Boss直聘投的簡歷，6月12號中午收到電話約的面試時間，剛開始說是13號晚上7點；后面可能時間有變，中午來了個電話說改到9-10點；怎么說算是第一次面試自己目標公司之一吧...

zombieda 2019-08-22 18:05 評論0 收藏0