当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

2019年11月20日  | 移动技术网IT编程  | 我要评论

react 父组件给子组件传参时，父组件直接在引入的子组件内写入要传递的参数即可

<headercomponent title={"传递的参数"}></headercomponent>

在子组件接收使用props

<div id="header">
    {this.props.title}
</div>

这样就可以获取到父组件内传递的参数。传参的同时也可以限制传参的类型，这里需要引入一个react的方法prop-types

import proptypes from 'prop-types';

然后去设置类型，使用组件名点proptypes

class headercomponent extends component {
    render() {
        return (
            <div id="header">
                {this.props.title}
            </div>
        )
    }
}

headercomponent.proptypes = { //.proptypes是react规定的名称,不可以修改
    title: proptypes.string //设置title的类型
};

react中规定的类型名称如下

这样如果传递的类型不是我们自己规定的类型的话，就会产生报错

 同时也可以设置这个值是否必须传递，使用isrequired这个属性

title: proptypes.string.isrequired

这样就可以规定title这个值必须存在否则产生如下报错

当然设置里这个参数必须传递的情况下，也可以选择不进行传值，这样的话需要设置一个默认值就可以了defaultprops

//设置默认值--->存在默认值情况下必填参数可以不传值，没有默认值必须传值
headercomponent.defaultprops = {
    title: '默认值'
};

这样在页面中显示内容就是设置的默认内容

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网