目標：元件之間值的props引數傳遞

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


class LikeButton extends Component {
    // 預設配置也可以這麼用，下邊是使用||實現的
    //這樣做就不需要在render函式中做判斷，有無傳進來this.props值了，直接使用
    static defaultProps = {
        likedText: '取消',
        unlikedText: '點贊'
    }
    constructor () {
      super()
      this.state = { isLiked: false }
    }
  
    handleClickOnLikeButton () {
      this.setState({
        isLiked: !this.state.isLiked
      })
      //傳入點選點選事件
      if (this.props.onClick) {
          /* 
            打印出來的，這個傳入的函式是：
            function onClick() {
              return console.log('Click on like button!');
            }
          */
        console.log(this.props.onClick)
        // 呼叫一下這個函式，於是每次點選，都會在控制它打印出這一句‘click on like button’
        this.props.onClick()
      }
    }

    /* 
        問題：傳進來的props在元件內部不可更改 例如重新賦值this.props.likedText = 'a' 會報錯
        報錯資訊：Cannot assign to read only property 'likedText' of object '#<Object>
        需求：由props決定的顯示形態有變化，需要修改
        解決辦法：通過重新渲染的方式把新的props傳入元件中，從而改變顯示形態
        思路：通過setState去改變state，之後會重新渲染，在渲染中
    */
    handleClickOnChange () {
        this.setState({
          likedText: '取消',
          unlikedText: '點贊'
        })
    }

    render () {
        // 在元件內部通過this.props的方式獲取元件的引數
        // 如果沒有引數就用預設值  null || 預設值
      const likedText = this.props.likedText || '取消'
      const unlikedText = this.props.unlikedText || '點贊'
      const wordings = this.props.wordings || {
        likedText: '取消',
        unlikedText: '點贊'
      }
        //傳入屬性
        //傳入物件
      return (
          <div>
            <button onClick={this.handleClickOnLikeButton.bind(this)}>
                {this.state.isLiked ? likedText : unlikedText} ?
            </button>
            <button onClick={this.handleClickOnLikeButton.bind(this)}>
                {this.state.isLiked ? wordings.likedText : wordings.unlikedText} ?
            </button>
          </div>
      )
    }
  }

  class Index extends Component {
    render () {
      return (
        /* 
            // 使用元件時，把引數以屬性的形式放進標籤中，所有的屬性都會作為props物件的鍵值對
            // 任何型別的資料都可以作為元件的引數，包括字串、數字、物件、陣列、函式等
            // JSX的表示式用{}包裹,傳入物件就會變成{{鍵值對}}
        */
        <div>
            <div>
                <LikeButton likedText='已贊' unlikedText='贊' />
                <LikeButton wordings={{likedText: '已贊', unlikedText: '贊'}} />
                <LikeButton onClick={() => console.log('Click on like button!')}/>
            </div>
            
            <div>
                <span>按鈕用來修改state中的兩個屬性</span>
                <button onClick={this.handleClickOnChange.bind(this)}>修改 wordings</button>
                
                <span>此時再傳給likedText的props是已經修改過的state裡的值，達到了修改傳入props的目的</span>
                <LikeButton likedText={this.state.likedText} unlikedText={this.state.unlikedText}/>
            </div>
        </div>
      )
    }
  }

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