摘要：默認(rèn)配置上面的組件默認(rèn)配置我們是通過操作符來實現(xiàn)。但這并不意味著由決定的顯示形態(tài)不能被修改。組件可以在內(nèi)部通過獲取到配置參數(shù)，組件可以根據(jù)的不同來確定自己的顯示形態(tài)，達到可配置的效果。下一節(jié)中我們將介紹小書。

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson11

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

在線閱讀：http://huziketang.com/books/react

組件是相互獨立、可復(fù)用的單元，一個組件可能在不同地方被用到。但是在不同的場景下對這個組件的需求可能會根據(jù)情況有所不同，例如一個點贊按鈕組件，在我這里需要它顯示的文本是“點贊”和“取消”，當(dāng)別的同事拿過去用的時候，卻需要它顯示“贊”和“已贊”。如何讓組件能適應(yīng)不同場景下的需求，我們就要讓組件具有一定的“可配置”性。

React.js 的 props 就可以幫助我們達到這個效果。每個組件都可以接受一個 props 參數(shù)，它是一個對象，包含了所有你對這個組件的配置。就拿我們點贊按鈕做例子：

下面的代碼可以讓它達到上述的可配置性：

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    const likedText = this.props.likedText || "取消"
    const unlikedText = this.props.unlikedText || "點贊"
    return (
      
        {this.state.isLiked ? likedText : unlikedText} ?
      
    )
  }
}

從 render 函數(shù)可以看出來，組件內(nèi)部是通過 this.props 的方式獲取到組件的參數(shù)的，如果 this.props 里面有需要的屬性我們就采用相應(yīng)的屬性，沒有的話就用默認(rèn)的屬性。

那么怎么把 props 傳進去呢？在使用一個組件的時候，可以把參數(shù)放在標(biāo)簽的屬性當(dāng)中，所有的屬性都會作為 props 對象的鍵值：

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

就像你在用普通的 HTML 標(biāo)簽的屬性一樣，可以把參數(shù)放在表示組件的標(biāo)簽上，組件內(nèi)部就可以通過 this.props 來訪問到這些配置參數(shù)了。

前面的章節(jié)我們說過，JSX 的表達式插入可以在標(biāo)簽屬性上使用。所以其實可以把任何類型的數(shù)據(jù)作為組件的參數(shù)，包括字符串、數(shù)字、對象、數(shù)組、甚至是函數(shù)等等。例如現(xiàn)在我們把一個對象傳給點贊組件作為參數(shù)：

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

現(xiàn)在我們把 likedText 和 unlikedText 這兩個參數(shù)封裝到一個叫 wordings 的對象參數(shù)內(nèi)，然后傳入點贊組件中。大家看到 {{likedText: "已贊", unlikedText: "贊"}} 這樣的代碼的時候，不要以為是什么新語法。之前討論過，JSX 的 {} 內(nèi)可以嵌入任何表達式，{{}} 就是在 {} 內(nèi)部用對象字面量返回一個對象而已。

這時候，點贊按鈕的內(nèi)部就要用 this.props.wordings 來獲取到到參數(shù)了：

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    const wordings = this.props.wordings || {
      likedText: "取消",
      unlikedText: "點贊"
    }
    return (
      
        {this.state.isLiked ? wordings.likedText : wordings.unlikedText} ?
      
    )
  }
}

甚至可以往組件內(nèi)部傳入函數(shù)作為參數(shù)：

class Index extends Component {
  render () {
    return (
      

         console.log("Click on like button!")}/>
      
    )
  }
}

這樣可以通過 this.props.onClick 獲取到這個傳進去的函數(shù)，修改 LikeButton 的 handleClickOnLikeButton 方法：

...
  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
    if (this.props.onClick) {
      this.props.onClick()
    }
  }
...

當(dāng)每次點擊按鈕的時候，控制臺會顯示 Click on like button! 。但這個行為不是點贊組件自己實現(xiàn)的，而是我們傳進去的。所以，一個組件的行為、顯示形態(tài)都可以用 props 來控制，就可以達到很好的可配置性。

上面的組件默認(rèn)配置我們是通過 || 操作符來實現(xiàn)。這種需要默認(rèn)配置的情況在 React.js 中非常常見，所以 React.js 也提供了一種方式 defaultProps，可以方便的做到默認(rèn)配置。

class LikeButton extends Component {
  static defaultProps = {
    likedText: "取消",
    unlikedText: "點贊"
  }

  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} ?
      
    )
  }
}

注意，我們給點贊組件加上了以下的代碼：

  static defaultProps = {
    likedText: "取消",
    unlikedText: "點贊"
  }

defaultProps 作為點贊按鈕組件的類屬性，里面是對 props 中各個屬性的默認(rèn)配置。這樣我們就不需要判斷配置屬性是否傳進來了：如果沒有傳進來，會直接使用 defaultProps 中的默認(rèn)屬性。 所以可以看到，在 render 函數(shù)中，我們會直接使用 this.props 而不需要再做判斷。

props 一旦傳入進來就不能改變。修改上面的例子中的 handleClickOnLikeButton ：

...
  handleClickOnLikeButton () {
    this.props.likedText = "取消"
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
...

我們嘗試在用戶點擊按鈕的時候改變 this.props.likedText ，然后你會看到控制臺報錯了：

你不能改變一個組件被渲染的時候傳進來的 props。React.js 希望一個組件在輸入確定的 props 的時候，能夠輸出確定的 UI 顯示形態(tài)。如果 props 渲染過程中可以被修改，那么就會導(dǎo)致這個組件顯示形態(tài)和行為變得不可預(yù)測，這樣會可能會給組件使用者帶來困惑。

但這并不意味著由 props 決定的顯示形態(tài)不能被修改。組件的使用者可以主動地通過重新渲染的方式把新的 props 傳入組件當(dāng)中，這樣這個組件中由 props 決定的顯示形態(tài)也會得到相應(yīng)的改變。

修改上面的例子的 Index 組件：

class Index extends Component {
  constructor () {
    super()
    this.state = {
      likedText: "已贊",
      unlikedText: "贊"
    }
  }

  handleClickOnChange () {
    this.setState({
      likedText: "取消",
      unlikedText: "點贊"
    })
  }

  render () {
    return (
      

        
        

          
            修改 wordings
          
        
      
    )
  }
}

在這里，我們把 Index 的 state 中的 likedText 和 unlikedText 傳給 LikeButton 。Index 還有另外一個按鈕，點擊這個按鈕會通過 setState 修改 Index 的 state 中的兩個屬性。

由于 setState 會導(dǎo)致 Index 重新渲染，所以 LikedButton 會接收到新的 props，并且重新渲染，于是它的顯示形態(tài)也會得到更新。這就是通過重新渲染的方式來傳入新的 props 從而達到修改 LikedButton 顯示形態(tài)的效果。

為了使得組件的可定制性更強，在使用組件的時候，可以在標(biāo)簽上加屬性來傳入配置參數(shù)。

組件可以在內(nèi)部通過 this.props 獲取到配置參數(shù)，組件可以根據(jù) props 的不同來確定自己的顯示形態(tài)，達到可配置的效果。

可以通過給組件添加類屬性 defaultProps 來配置默認(rèn)參數(shù)。

props 一旦傳入，你就不可以在組件內(nèi)部對它進行修改。但是你可以通過父組件主動重新渲染的方式來傳入新的 props，從而達到更新的效果。

下一節(jié)中我們將介紹《React.js 小書 Lesson12 - state vs props》。