react小书学习（Props）

2018-10-10

在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 props 对象的键值,可以通过props父子组件之间互相传参。

重点讲一下子组件如何向父组件传参吧

子组件通过this.props.method方法通过参数可以把要传递的数据传过去，如下

父组件：

    onSubmit(v){
        console.log(v)
    }

    render(){       //render方法用来输出dom
        return (
            <div className='App'>
                <CommentInput onSubmit={this.onSubmit.bind(this)}/>
                <CommentList />
            </div>
            )

    }


子组件：
handleSubmit(e){
    e.preventDefault();
    this.props.onSubmit(this.state.name)
}

在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 props 对象的键值：

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

就像你在用普通的 HTML 标签的属性一样，可以把参数放在表示组件的标签上，组件内部就可以通过 this.props 来访问到这些配置参数了。

总结

1、为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加属性来传入配置参数。

2、组件可以在内部通过 this.props 获取到配置参数，组件可以根据 props 的不同来确定自己的显示形态，达到可配置的效果。

3、可以通过给组件添加类属性 defaultProps 来配置默认参数。

class Screen extends Component {
  static defaultProps = {
    showContent:'无内容'
  }
  render () {
    return (
      <div className='screen'>{this.props.showContent}</div>
    )
  }
}

外部引用（如< Screen showContent=’aaa’>）时如果有showContent这个属性即用它的，没有就使用default的

4、props 一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。

5、注意的是推荐使用props替代state，原因是props的可配置性，更加灵活