初学react之props

一、在react中，我们的组件是需要可配置的，那么props就是用于配置我们的组件了

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

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

  render () {
    const wordings = this.props.wordings || {
      likedText: '取消',
      unlikedText: '点赞'
    }
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? wordings.likedText : wordings.unlikedText} 👍
      </button>
    )
  }
}

上面组件中我们通过props获取了两个属性值，用于渲染到我们的页面，那么我们父组件调用子组件时是怎样子的呢

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

子组件中传入的属性likedText和unlikedText，然后利用props接受这两个参数，用于父子组件传值。

二、注意事项

一旦我们的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>
    )
  }
}

通过setState来修改传入到子组件的属性，美滋滋