關於 React 小書：React props

在 Compoent 上放參數

通過 this.props 拿到參數，除了直接放上去之外，也可包裝成物件或其他類型

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />
      </div>
    )
  }
}

defaultProps

因常會用 || 設定預設值，故在 React 採用 static，建立 default

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

// 建構 instance
class LikeButton extends Component {
  // 設定預設值
  static defaultProps = {
    likedText: '取消',
    unlikedText: '按讚'
  }

  // 初始化
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  // 事件監聽觸發的函式
  handleClickOnLikeButton () {
    // 重新設定狀態
    this.setState({
      isLiked: !this.state.isLiked
    })
    if (this.props.onClick) {
      this.props.onClick()
    }
  }

  // 渲染
  render () {
    // 將文字儲存為常數
    // const wordings = this.props.wordings || {
    //   likedText: '取消',
    //   unlikedText: '按讚'
    // }

    return (    
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} 👍
      </button>
    )
  }
}

// 建立 instance，把 <LikeButton /> 包在 <Index />裡面
class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton
          wordings={{likedText: '已讚', unlikedText: '讚'}}
          onClick={() => console.log('Click')} />
      </div>
    )
  }
}

// ReactDOM 渲染
ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

props 一旦傳進來便不可變

這樣會 error，若 props 渲染的過程中可被修改，這樣不可預測 Component 的外觀與行為。

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

但可透過重新渲染將新的 props 傳入 Component 裡

以這種方式便能修改欲渲染物件的外觀與行為。

把 Index 的 state 裡的 likedText、unlikedText 傳給 LikeButton。Index 的另一個按鈕，點擊後會透過 setState 修改 Index 的 state 裡的兩個屬性。

由於 setState 讓 Index 重新渲染，故 LikeButton 會收到新的 props 而更新形態。

小結：透過重新渲染的方式傳入新的 props，進而修改 Like

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

// 建構 instance
class LikeButton extends Component {
  // 設定預設值
  static defaultProps = {
    likedText: '取消',
    unlikedText: '按讚'
  }

  // 初始化
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  // 事件監聽觸發的函式
  handleClickOnLikeButton () {
    // 重新設定狀態

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

  // 渲染
  render () {
    // 將文字儲存為常數
    // const wordings = this.props.wordings || {
    //   likedText: '取消',
    //   unlikedText: '按讚'
    // }

    return (    
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} 👍
      </button>
    )
  }
}

// 建立 instance，把 <LikeButton /> 包在 <Index />裡面
class Index extends Component {
  constructor () {
    super()
    this.state = {
      likedText: '已讚',
      unlikedText: '讚'
    }
  }

  handleClickOnChange () {
    this.setState({
      likedText: '取消',
      unlikedText: '按讚'
    })
  }

  render () {
    return (
      <div>
        <LikeButton
          likedText={this.state.likedText}
          unlikedText={this.state.unlikedText} />
        <div>
          <button onClick={this.handleClickOnChange.bind(this)}>
            修改 wordings
          </button>
        </div>
      </div>
    )
  }
}

// ReactDOM 渲染
ReactDOM.render(
  <Index />,
  document.getElementById('root')
)