元件的props（ props是一個物件 ）

作用：接收傳遞給元件的資料
特點：

• 可以給元件傳遞任意型別的資料
• props是隻讀的物件，只能讀取屬性的值，無法修改物件
• 注意：使用類元件時，如果寫了建構函式，應該將props傳遞給super()，否則，無法在建構函式中獲取到

propUcsESis props 的使用

 <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心庫 -->
  <script src="../
 
js/http://www.cppcns.comreact.development.js"></script>
  <!-- 引入react-dom，用於支援react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用於將jsx 轉換為 js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  // 建立元件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性別：{sex}</li>
          <li>年齡：{age+1}</li>
        </ul>
      )
    }
  }
  // 渲染元件到頁面
  ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老劉',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

對props進行限制

一定要引入 prop-types.js 否則會報錯

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心庫 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom，用於支援react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用於將jsx 轉換為 js -->
  <script src="../js/babel.min.js"></script>
  <!-- 引入prop-types,用於對元件標籤屬性進行限制 引入後全域性就多了一個物件 PropTypes -->
  <script src="../js/prop-types.js"></script>

  <script type='text/babel'>
  // 建立元件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性別：{sex}</li>
          <li&g
 
程式設計客棧t;年齡：{age+1}</li>
        </ul>
      )
    }
  }
  // 限制規則
  Person.propTypes = {
    // 限制name 內容為字串  isRequired 表示該內容為必須的不能省略
    name:PropTypes.string.isRequired,// 限制sex為字串
    sex: PropTypes.string,// 限制age為數值
    age: PropTypes.number,// 限制speak為函式
    speak: PropTypes.func
  }
  Person.defaultProps = {
    sex:'男',// sex 預設值 為男
    age:18,speak: function() {
        return [1];
    }
www.cppcns.com  }
  // 渲染元件到頁面
  ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test3'))

  </script>

vue 對props進行限定

我們可以為元件的 prop 指定驗證要求，例如你知道的這些型別。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制檯中警告你。這在開發一個會被別人用到的元件時尤其有幫助。

為了定製 prop 的驗證方式，你可以為 props 中的值提供一個帶有驗證需求的物件，而不是一個字串陣列。例如：

Vue.component('my-component',{
  props: {
    // 基礎的型別檢查 (`null` 和 `undefined` 會通過任何型別驗證)
    propA: Number,// 多個可能的型別
    propB: [String,Number],// 必填的字串
    propC: {
      type: String,required: true
    },// 帶有預設值的數字
    propD: {
      type: Number,default: 100
    },// 帶有預設值的物件
    propE: {
      type: Object,// 物件或陣列預設值必須從一個工廠函式獲取
      default: function () {
        return { message: 'hello' }
      }
    },// 自定義驗證函式
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字串中的一個
        return ['success','warning','danger'].indexOf(value) !== -1
      }
    }
  }
})

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。

注意那些 prop 會在一個元件例項建立之前進行驗證，所以例項的 property (如 data、computed 等) 在 default 或 validator 函式中是不可用的。

型別檢查
type 可以是下列原生建構函式中的一個：

String
Number
Boolean
Array
Object
Date
Function
Symbol

額外的，type 還可以是一個自定義的建構函式，並且通過 instanceof 來進行檢查確認。例如，給定下列現成的建構函式：

function Person (firstName,lastName) {
  this.firwww.cppcns.comstName = firstName
  this.lastName = lastName
}

你可以使用：

Vue.component('blog-post',{
  props: {
    author: Person
  }
})

來驗證 author prop 的值是否是通過 new Person 建立的。

到此這篇關於react 中的 props 的使用以及進行限制的文章就介紹到這了,更多相關react props進行限制內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！