props怎么在react中使用

這篇文章給大家介紹props怎么在react中使用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

組件的props（ props是一個對象 ）

作用：接收傳遞給組件的數據
特點：

• 可以給組件傳遞任意類型的數據

• props是只讀的對象，只能讀取屬性的值，無法修改對象

• 注意：使用類組件時，如果寫了構造函數，應該將props傳遞給super()，否則，無法在構造函數中獲取到

props props 的使用

 <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>
  <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,age,sex} = this.props
      return(
        <ul>
          <li>姓名：{name}</li>
          <li>性別：{sex}</li>
          <li>年齡：{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];
    }
  }
  // 渲染組件到頁面
  ReactDOM.render(<Person name="jerry" age={19} />,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>

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.firstName = firstName
  this.lastName = lastName
}

你可以使用：

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

關于props怎么在react中使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。