React之配置元件的 props（兩個例項）

> 這裡要吐槽一下html模式下發布部落格有問題，前面發了兩遍都不能顯示完全，很氣。

1.第一個是點贊功能

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

//點贊功能

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 (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? likedText : unlikedText} ��
      </button>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton likedText=`已贊` unlikedText=`贊` />
      </div>
    )
  }
}

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

2.第二個是鬍子大哈的ScriptOJ上的例子

完成兩個元件，電腦 Computer 和顯示器 Screen。電腦有個 status 狀態表示電腦現在是開還是關的，status 為 on 為開，status 為 off 為關，預設狀態為 off。電腦有個按鈕，點選可以自由切換電腦的開關狀態。顯示器接受一個名為 showContent 的 props，顯示器會把它內容顯示出來。如果不傳入 showContent，顯示器顯示 “無內容”。電腦包含顯示器，當電腦狀態為開的時候顯示器顯示“顯示器亮了”，否則顯示“顯示器關了”。

class Computer extends Component{
  constructor(){
    super()
    this.state={status:`off`}//設定預設狀態為`off`
  }
  clickButton(){
    this.setState(
      {status:this.state.status==`off`?`on`:`off`}//改變status
      )
  }
  render(){
    return(
      <div>
        <button onClick={this.clickButton.bind(this)}>開關</button>
        <Screen showContent={this.state.status==`off`?`顯示器關了`:`顯示器亮了`} />
      </div>
      )
  }
}

class Screen extends Component{
  static defaultProps={showContent:`無內容`} //設定靜態顯示內容
  render(){
    const showContent=this.props.showContent
    return(
      <div className=`screen`>{showContent}</div>)
  }

  }
原文地址http://www.bieryun.com/2540.html