React 組件之屬性

如果你想要實現自己的夢想，就必須先擁有勇氣去追求它。

1. React Props

屬性 props 主要解決兩個問題：復用性問題以及可以讓組件之間通信。

屬性 props 正常是外部傳入的，組件內部也可以通過一些方式來初始化的設置，屬性不能被組件自己更改（屬性是描述性質、特點的，組件自己不能隨意更改），但是你可以通過父組件主動重新渲染的方式來傳入新的 props。

工程組件代碼裡面有 props 的簡單使用，總的來說，在使用一個組件的時候，可以把參數放在標簽的屬性當中，所有的屬性都會作為組件 props 對象的鍵值。通過箭頭函數創建的組件，需要通過函數的參數（形參）來接收 props：

（1） 在組件上通過 key=value 寫屬性，通過 this.props 獲取屬性，這樣組件的可復用性提高了。

（2）註意在傳參數時候，如果寫成 isShow="'true" 那麼這是一個字元串，如果寫成 isShow={true} 這個是布爾值。

（3）對象傳遞可以通過 {...對象} 展開賦值，後面也可以加其它屬性。

2. 屬性預設值

2.1）類組件

類組件使用 defaultProps 給組件設置屬性預設值。

// Navbar 自定義組件
// 預設屬性值定義方法一：組件外部定義 - 不推薦
Navbar.defaultProps = {
  title: "預設標題"
}

// 預設屬性值定義方法二：組件內部定義
static defaultProps = {
  title: "預設標題"
}

2.2）函數式組件

函數式組件直接使用函數參數預設值來設置 props 預設值。也可以通過 Navbar.defaultProps 來設置預設值，不推薦。

3. 屬性類型驗證

3.1）不做驗證

直接通過 this.props 獲取屬性，不做任何驗證。

3.2）prop-types

prop-types 是一個 React 屬性校驗庫，使用如下：

import React, { Component } from 'react'
import kvTypes from 'prop-types'

// 狀態只能內部自己使用，不能進行傳遞。屬性是父組件傳遞過來的，this.props。
export default class Navbar extends Component {

  // 類屬性定義方法二、類型驗證
  static propTypes = {
    title: kvTypes.string,
    showLeft: kvTypes.bool,
    showRight: kvTypes.bool
  }

  render() {
    // 屬性解構
    let { title, showLeft, showRight } = this.props
    return (
      <div>
        { showLeft && <button>返回</button> }
        navbar-{title}
        { showRight && <button>搜索</button> }
      </div>
    )
  }
}

// 類屬性定義方法一、類型驗證
// Navbar.propTypes = {
//   title: kvTypes.string,
//   showLeft: kvTypes.bool,
//   showRight: kvTypes.bool
// }

4. 函數式組件 Props

函數式組件 Props 是直接通過形式參數進行數據傳遞。參數驗證和預設值只能通過 Navbar.propTypes 和 Navbar.defaultProps 設置。

import React from 'react'

export default function Slidbar(props) {
  return (
    <div>Slidbar</div>
  )
}

5. 插槽 slot

插槽（slot）是屬性中的特殊屬性，寫法固定，能夠在組件構建的時候向組件模版定義好的位置插入自定義的結構。插槽的作用可以總結為以下兩點：

• 能夠使組件得到更好的復用；
• 在一定程度減少父子通信；

import React, { Component } from 'react'

class Child extends Component {
  render() {
    return (
      <div>
        Child
        {/* 插槽 vue 叫 slot 屬性中的特殊屬性 */}
        { this.props.children[2]}
      </div>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Child>
          {/* 這裡 div 中的內容是不會展示的，App 在渲染的時候，解析到 Child 組件的時候，
              Child 定義模版（上面定義）會替換掉下麵構建的 Child 組件，這裡加的 div 是不會被包裹顯示的。 
              */}
          {/* 這裡定義的結構會被掛到一個特別的屬性上面：children  */}
          <div>組件中寫內容1</div>
          <div>組件中寫內容2</div>
          <div>組件中寫內容3</div>
        </Child>
      </div>
    )
  }
}