React中props

 

今天讓我們開啟新的篇章好吧，來搞一搞React，以下所有操作都是我個人的一些理解，如果有錯吳還請指出，想要看更全的可以去React官網可能一下子好吧

昨天按摩沒到位，導致今天身體不太行，擼碼千萬別苦了自己，活着最重要

我們先來搞一搞React中props的使用，React項目的基本搭建我就不做了，很簡單。直接開始上內容好吧

1.和Vue一樣React也使用props來進行父組件往子組件傳參，基本使用還是很簡單的

步驟：

1.父組件調用子組件時傳入屬性

2.子組件直接通過this.props.屬性名   即可拿到父組件傳過來的值

　

import React, { Component,Fragment} from 'react';

//React的props傳參

// 父組件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child aaa="紅牛"></Child>
      </Fragment>
    )
  }
}

// 子組件
class Child extends Component{
      render(){
        return (
          <div>{this.props.aaa}</div>
        )
      }
}

export default App;

（我在這里提醒一句，文章所有代碼都運行在搭好的React環境中，千萬別拉到本地直接扔到一個html文件里，一運行一看運行不起來，這就好比在一個沒有空氣的星球，試圖靠空氣生存一樣，空氣都沒有，你說能活下去嘛）

運行結果：

 

2.現在基本傳參可以了，那能不能傳點別的過去，當然可以，要是只能傳參數豈不是很雞肋，下面我們來試試能不能傳一個函數過去，當然是可以的

步驟：1.在父組件里定義一個函數

　　　2.調用子組件時將函數傳過去

　　　3.子組件通過this.props.函數名（）來調用函數並且執行

 

import React, { Component,Fragment} from 'react';

//React的props傳參

// 父組件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child aaa="紅牛" bbb={this.hanshu}></Child>
      </Fragment>
    )
  }
  hanshu(){
    return  "我是父組件傳過來的函數"
}}

// 子組件
class Child extends Component{
      render(){
        return (
          <div>{this.props.aaa}{this.props.bbb()}</div>
        )
      }
}

export default App;

運行結果：

 

3.學過Vue的同學可能會知道Vue里面是可以對props傳過來的值進行驗證的，比如他的類型，是否為空，默認值等等，那在我們的React中有沒有對props進行驗證呢，答案是肯定的

　　只不過React的props驗證沒有Vue的驗證用起來方便，下面我們來看一看React中props具體是怎么驗證的

　　1.安裝props-type

　　　　yarn add prop-types 

　　2.引入prop-types

　　3.愉快的使用兩個屬性來進行驗證  

　　　　　　1.propTypes：用來驗證類型和是否必傳

　　　　　　2.defaultProps:用來設置未傳參時的默認值

　　　下面我們直接將代碼發上來好吧

　　　　

import React, { Component,Fragment} from 'react';
import PropTypes from 'prop-types'
//React的props傳參

// 父組件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child aaa="紅牛"  ccc="大紅棗"></Child>
      </Fragment>
    )
  }}

// 子組件
class Child extends Component{
      render(){
        return (
          <div>{this.props.aaa}
          <hr/>
          {this.props.bbb}
          <hr/>
          {this.props.ccc}
          <hr/>
          {this.props.ddd}
          <hr/>
          </div>
        )
    }
}
//對傳過來的props進行驗證
//驗證類型和是否必傳
Child.propTypes = {
    // 傳入aaa的類型必須為number（不傳不會報錯，僅僅是限制已傳入的參數類型）
    aaa:PropTypes.number,
    //必須傳入bbb
    bbb:PropTypes.isRequired,
    //必須傳入ccc且類型必須為
    ccc:PropTypes.string.isRequired
}

//設置默認值
Child.defaultProps = {
    ddd:"默認值"
}

export default App;

運行結果：

　　　　　　

 　　　　我先來解釋解釋這兩個錯誤  1：aaa類型傳入為string，期望為number

　　　　　　　　　　　　　　　　　2.bbb需要被傳入

　　　　我們可以看到結果都顯示了，但是報錯了，所以我們得到一個結論，驗證不通過會報錯，但是實際上並不影響我們頁面的正常顯示

上面我們進行是講props的驗證放到了類的定義外面，放到外面感覺有點分離了，那我們能不能拿到里面來呢，當然可以了，下面我們來看看另一種寫法

　　　　利用static靜態屬性將驗證寫在類的里面

　　　　下面直接上代碼

　　　　

import React, { Component,Fragment} from 'react';
import PropTypes from 'prop-types'
//React的props傳參

// 父組件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child aaa="紅牛"  ccc="大紅棗"></Child>
      </Fragment>
    )
  }}

// 子組件
class Child extends Component{
      render(){
        return (
          <div>{this.props.aaa}
          <hr/>
          {this.props.bbb}
          <hr/>
          {this.props.ccc}
          <hr/>
          {this.props.ddd}
          <hr/>
          </div>
        )
    }
    static propTypes = {
          // 傳入aaa的類型必須為number（不傳不會報錯，僅僅是限制已傳入的參數類型）
        aaa:PropTypes.number,
         //必須傳入bbb
        bbb:PropTypes.string.isRequired,
        //必須傳入ccc且類型必須為
        ccc:PropTypes.string.isRequired
    }
    static defaultProps = {
      ddd:"默認值"
    }
}

export default App;

 

 

好了，暫時關於React中的props我就寫這些，大家有需要的可以參考參考，如有錯誤，請以官方文檔為准，溜了溜了，用膳去