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

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

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

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

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

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

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

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 函數可以看出來，組件內部是通過 this.props 的方式獲取到組件的參數的，如果 this.props 里面有需要的屬性我們就采用相應的屬性，沒有的話就用默認的屬性。

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

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

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

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

class Index extends Component {
  render () {
    return (
      

        
      
    )
  }
}

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

這時候，點贊按鈕的內部就要用 this.props.wordings 來獲取到到參數了：

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} ?
      
    )
  }
}

甚至可以往組件內部傳入函數作為參數：

class Index extends Component {
  render () {
    return (
      

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

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

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

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

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

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 中各個屬性的默認配置。這樣我們就不需要判斷配置屬性是否傳進來了：如果沒有傳進來，會直接使用 defaultProps 中的默認屬性。 所以可以看到，在 render 函數中，我們會直接使用 this.props 而不需要再做判斷。

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

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

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

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

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

修改上面的例子的 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 會導致 Index 重新渲染，所以 LikedButton 會接收到新的 props，并且重新渲染，于是它的顯示形態也會得到更新。這就是通過重新渲染的方式來傳入新的 props 從而達到修改 LikedButton 顯示形態的效果。

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

組件可以在內部通過 this.props 獲取到配置參數，組件可以根據 props 的不同來確定自己的顯示形態，達到可配置的效果。

可以通過給組件添加類屬性 defaultProps 來配置默認參數。

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

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