React中props使用教程

更新時(shí)間：2022年09月29日 14:59:30 作者：月光曬了很涼快

props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來傳遞參數(shù)。組件實(shí)例化過程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會在實(shí)例化過程中被引用

1. children 屬性

概述：

children 屬性，表示組件標(biāo)簽的子節(jié)點(diǎn)，當(dāng)組件標(biāo)簽有子節(jié)點(diǎn)時(shí)，props 就會有該屬性，與普通的 props 一樣，其值可以是任意類型。單標(biāo)簽和雙標(biāo)簽中沒有數(shù)據(jù)就沒有此屬性。

語法：

# 父組件
class App extends React.Component {
  render() {
    return (
        <div>
          <Cmp>我是children中的值</Cmp>
        </div>
    )
  }
}
# 子組件
{props.children} 獲取數(shù)據(jù)

要點(diǎn)：

在自定義組件標(biāo)簽中間寫的內(nèi)容，它都會通過 this.props.children 屬性獲取
如果自定義組件標(biāo)簽中間只有一個(gè)子元素，則此屬性返回一個(gè)對象，如果是多個(gè)子元素則返回一個(gè)數(shù)組。使用它就可以實(shí)現(xiàn)類似于vue中的插槽功能。

使用：

import React, { Component } from 'react';
class Child extends Component {
  render() {
    console.log(this.props.children);
    return (
      <div>
        <h3>我是child組件</h3>
        {
          this.props.children
            ?
            this.props.children
            :
            <div>我是默認(rèn)值</div>
        }
      </div>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div>
        <Child>
          <div>我是child組件元素中間包裹的內(nèi)容1</div>
          <div>我是child組件元素中間包裹的內(nèi)容2</div>
          <div>我是child組件元素中間包裹的內(nèi)容3</div>
        </Child>
      </div>
    );
  }
}
export default App;

1.1 React.cloneElement方法

概述：

cloneElement 方法，是 React 中的頂層 Api 方法，作用是克隆一個(gè)虛擬 dom 對象。這個(gè)方法對 this.props.children 進(jìn)行加工拓展后，顯示在頁面上。

使用：

import React, { Component } from 'react';
class Child extends Component {
  state = {
    id: 1000
  }
  render() {
    // React中的頂層Api方法  克隆一個(gè)虛擬dom對象
    let cloneElement = React.cloneElement(this.props.children, {
      style: { color: 'red' },
      uid: this.state.id,
      onClick: () => console.log('我是事件', this.state.id)
    })
    console.log(cloneElement);
    return (
      <div>
        <h3>我是child組件</h3>
        <hr />
        {cloneElement}
      </div>
    );
  }
}
class App extends Component {
  state = {
    title: '我是child組件元素中間包裹的內(nèi)容'
  }
  render() {
    return (
      <div>
        <Child>
          <div>{this.state.title}</div>
        </Child>
      </div>
    );
  }
}
export default App;

1.2 React.Children.map方法

概述：

React.Children.map 方法，是 React 中的頂層 Api 方法，作用是遍歷 this.props.children 。

使用：

import React, { Component } from 'react';
class Child extends Component {
  state = {
    id: 1000
  }
  render() {
    // React中的頂層Api方法  遍歷 React.Children.map
    // 這個(gè)方法會自動地判斷傳入的數(shù)據(jù)是數(shù)組還是對象
    let cloneElement = React.Children.map(this.props.children, (child, index) => {
      // console.log(index, child);
      return React.cloneElement(child, {
        style: { color: 'red' },
        uid: this.state.id,
        onClick: () => console.log('我是事件', this.state.id)
      })
    })
    return (
      <div>
        {this.props.header}
        <h3>我是child組件</h3>
        <hr />
        {cloneElement}
        <hr />
        {this.props.footer}
      </div>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div>
        <Child
          header={<div>我是頭部</div>}
          footer={<div>底部</div>}
        >
          <div>我是child組件元素中間包裹的內(nèi)容1</div>
          <div>我是child組件元素中間包裹的內(nèi)容2</div>
          <div>我是child組件元素中間包裹的內(nèi)容3</div>
        </Child>
      </div>
    );
  }
}
export default App;

2. 類型限制（prop-types）

概述：

對于組件來說，props 是外部傳入的，無法保證組件使用者傳入什么格式的數(shù)據(jù)，簡單來說就是組件調(diào)用者可能不知道組件封裝者需要什么樣的數(shù)據(jù)，如果傳入的數(shù)據(jù)不對，可能會導(dǎo)致程序異常，所以必須要對于 props 傳入的數(shù)據(jù)類型進(jìn)行校驗(yàn)。

React 版本從 15.5 之后就將 prop-types 移出了核心庫，使用它需要安裝：

yarn add prop-types

使用時(shí)還需要導(dǎo)入包：

import types from 'prop-types'

語法：

# 函數(shù)組件
function App(){}
// 驗(yàn)證規(guī)則
App.propTypes = {
    prop-name:PropTypes.string
}
# 類組件
class App extends Component{
}
App.propTypes = {
    prop-name:PropTypes.string
}
# 約束類型
- 類型： array、bool、func、number、object、string
- React元素類型：element
- 必填項(xiàng)：isRequired
- 特定結(jié)構(gòu)的對象： shape({})

使用：

import React, { Component } from 'react';
import types from 'prop-types'
class Child extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h3>我是child組件 -- {this.props.sex}</h3>
      </div>
    );
  }
}
// 字段類型限制
Child.propTypes = {
  // age: number
  // 年齡的屬性它必須是一個(gè)數(shù)字類型,且此屬性必須要存在
  age: types.number.isRequired,
  // 在指定的值中間選擇其中一個(gè)
  sex: types.oneOf(['男', '女']),
  // 定義數(shù)組類型
  // arr: types.array
  // 定義數(shù)組類型，并且指定元素的類型
  arr: types.arrayOf(types.number),
  // 對象類型
  // obj: types.object
  obj: types.shape({
    // id: types.number,
    // 兩個(gè)類型選擇
    id: types.oneOfType([types.number, types.string]),
    name: types.string
  }),
  fn: types.func,
  // 自定義規(guī)則
  // props，當(dāng)前的屬性列表對象
  // key 當(dāng)前的屬性名稱
  phone: (props, key) => {
    // 得到屬性的值 
    let value = props[key]
    if (!/^1[3-9]\d{9}$/.test(value)) {
      // 如果不正確，一定要返回一個(gè)Error對象，這樣就可以在控制臺中看到信息,不要throw
      return new Error('有誤')
    }
  }
}
class App extends Component {
  fn = () => {
    console.log('fn');
  }
  render() {
    return (
      <div>
        <Child age={1} sex="男" arr={[1, 2, 3]} obj={{ id: 1, name: '張三' }} fn={this.fn} phone="13523253235" />
      </div>
    );
  }
}
export default App;

3. 默認(rèn)值(defaultProps)

概述：

如果 props 屬性沒有傳過數(shù)據(jù)來，為了不讓程序異常，可以設(shè)置其默認(rèn)值。

語法：

# 函數(shù)組件
function App(){}
# 類組件
class App extends Component {}
App.defaultProps = {
    title: '標(biāo)題'
}

使用：

import React, { Component } from 'react';
import types from 'prop-types'
class Child extends Component {
  // 這是類組件的獨(dú)有設(shè)置限制字段和默認(rèn)值的寫法，函數(shù)組件不能這么寫
  static propTypes = {
    age: types.number,
  }
  static defaultProps = {
    age: 2000
  }
  render() {
    // 在此處寫的默認(rèn)，屬于開發(fā)者，自主去寫的，有可能有的開發(fā)者他就不定義
    // 所以需要用 defaultProps 強(qiáng)制加一個(gè)默認(rèn)值，并且 defaultProps 定義的默認(rèn)值優(yōu)先級更高
    let { age = 1 } = this.props
    console.log(age);
    return (
      <div>
        <h3>我是child組件</h3>
      </div>
    );
  }
}
// 此寫法是類組件和函數(shù)組件通用的寫法
// // 字段類型限制
// Child.propTypes = {
//   age: types.any,
// }
// // 默認(rèn)值 直接賦值就可以
// Child.defaultProps = {
//   age: 1000
// }
class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}
export default App;