父子组件通信props(限定类型),自定义事件

***组件自己的数据:this.state={a:'test'} 设置this.setState({a:'b'});获取this.state.a;

1:父亲给孩子传值,用到的是props我们在父组件引用子组件时,给一个自定义的属性例如 <child con='666'></child>

这个时候在子组件中可以用this.props.con来得到这个传递过来的值。

2:孩子给父亲传值,用到的是自定义事件。首先还是在父组件引用子组件的标签名上<child move={this.move.bind(this)}></child> move是父组件上的一个方法。

子组件上我们用源生事件来触发自定义事件例如onclick={this.props.move}.

3:限定父组件传过来值的类型,默认值

限制类型和是否必须传值可以用prop-types这个组件,首先我们npm安装依赖这个组件,然后在子组件中import propTypes from "prop-types";然后我们在子组件中这样配置

child.propTypes={

   context:propTypes.string.isRequired;//string限制类型,isRequired限定是否必须传值。

}

设置默认值

child.defaultProps={

context="text";

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容