react 日常工作小笔记

原创

小羽向前跑 2023-01-03 14:51:42 ©著作权

©著作权归作者所有：来自51CTO博客作者小羽向前跑的原创作品，请联系作者获取转载授权，否则将追究法律责任

默认配置 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 中各个属性的默认配置。这样我们就不需要判断配置属性是否传进来了：如果没有传进来，会直接使用 defaultProps 中的默认属性。所以可以看到，在 render 函数中，我们会直接使用 this.props 而不需要再做判断。