react学习记录-配置组件的props

配置组件的props

组件根据不同的使用场合要进行个性化配置，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 (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? likedText : unlikedText} 👍
      </button>
    )
  }
}

render根据this.props获取组件参数，并设置了this.props为空时的默认值。而我们传入props的方式，和vue中是很相似的：

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

就像HTML标签的属性一样，我们可以将参数传入，最后所有的属性将作为props对象的Key-Value。

我们也可以直接传入一个对象（字符串、数字、数组、函数等等都可以），并从this.props中取用那个对象：

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}}
            onClick={() => console.log('Click on like button!')} />
      </div>
    )
  }
}

这样可以通过 this.props.onClick 获取到这个传进去的函数，修改 LikeButton的 handleClickOnLikeButton 方法：

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

这样就可以自定义一些组件的事件，只要我们传入props，它就会拥有相应的行为。

默认配置（defaultProps）

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

这样我们就不需要判断配置属性是否传进来了：如果没有传进来，会直接使用 defaultProps 中的默认属性。

props是单向的（不可变）

props 一旦传入进来就不能改变。当我们尝试修改传入的this.props中的属性时，我们会发现控制台报错。这点和vue中组件的通信方式也是类似的，在React.js中，我们希望一个组件在输入了确定的props之后，能够输出确定的UI显示状态。因此一旦props被修改，那么这个组件的显示状态和行为将变得不可预测，这会给使用者带来困惑。

那么如何再次修改由props决定的组件的显示状态呢？组件的使用者可以主动地通过重新渲染的方式把新的 props 传入组件当中，比如下面的例子：

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

我们新增了一个Button，去触发一个setState事件，进而修改Index组件的state中的两个属性。修改之后，由于setState是会导致组件重新渲染的，所以LikeButton也接收到了新的props参数，并重新渲染，显示形态也发生了改变。

小结

1、定制组件的方法：在标签上通过属性传入配置参数；

2、组件内部会通过this.props获取外部传入的配置参数，并进行UI的渲染更新；

3、通过defaultProps可以实现默认的配置参数；

4、props一旦传入，就不能在组件内部进行修改，可以认为数据是单向流动的；你可以通过父组件主动重新渲染，来传入新的props，达到更新的效果。

课后习题

• 打开和关闭电脑

class Computer extends Component {
  constructor(props){
      super(props)
      this.state = {
          status:"off"
      }
  }
  handleClick(){
    this.setState({
        status:this.state.status=="on"?"off":"on"
    })
  }
  render () {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>开关</button>
        <Screen showContent={this.state.status}/>
      </div>
    )
  }
}

class Screen extends Component {
  static defaultProps={
    showContent:"无内容"
  }
  render () {
    return (
      <div className='screen'>{this.props.showContent=="on"?"显示器亮了":
      (this.props.showContent=="off"?"显示器关了":"无内容")}</div>
    )
  }
}