react中配置props

一个组件可能在不同地方被用到，在不同情况下包含的内容也不一样，为了提高可复用性，要将其中的状态进行更换实现组件的一些可配置性的花就要用到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>
    )
  }
}

在这里定义了一个button在点击的时候我们用bind将我们的button的this指向指向了我们的button实例，在render中定义了一个const变量通过判断来展示我们的变量，在标签中存放参数也可以在组件内部通过this.props来进行调用

默认配置 defaultProps

  static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }

在我们的组件中定义了类属性，是对props的各个属性的默认配置，如果匹配的属性没有传进来了

那么将会在定义的defaultprops中进行调用，

在props中传入的参数不可以改变

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

在props传入进来的值不能被改变，尝试修改的时候灰暗到控制台发生报错

• 为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加属性来传入配置参数。
• 组件可以在内部通过 this.props 获取到配置参数，组件可以根据 props 的不同来确定自己的显示形态，达到可配置的效果。
• 可以通过给组件添加类属性 defaultProps 来配置默认参数。
• props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。