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

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

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

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

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

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

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

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 || "點(diǎn)贊"
    return (
      
        {this.state.isLiked ? likedText : unlikedText} ?
      
    )
  }
}

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

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

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

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

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

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

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

這時(shí)候，點(diǎn)贊按鈕的內(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: "點(diǎn)贊"
    }
    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 獲取到這個(gè)傳進(jìn)去的函數(shù)，修改 LikeButton 的 handleClickOnLikeButton 方法：

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

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

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

class LikeButton extends Component {
  static defaultProps = {
    likedText: "取消",
    unlikedText: "點(diǎn)贊"
  }

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

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

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

注意，我們給點(diǎn)贊組件加上了以下的代碼：

  static defaultProps = {
    likedText: "取消",
    unlikedText: "點(diǎn)贊"
  }

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

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

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

我們嘗試在用戶點(diǎn)擊按鈕的時(shí)候改變 this.props.likedText ，然后你會(huì)看到控制臺(tái)報(bào)錯(cuò)了：

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

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

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

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

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

  render () {
    return (
      

        
        

          
            修改 wordings
          
        
      
    )
  }
}

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

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

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

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

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

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

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