zoukankan      html  css  js  c++  java
  • react学习-react父组件给子组件传值与设置传值类型以及是否必传参数

    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: '默认值'
    };

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

  • 相关阅读:
    get请求中文乱码及get,post编码探究
    spring使用redis做缓存
    tomcat中session在两个webapp中实现共享
    JDK8 HashMap 源码解析
    Windows Apache服务器配置
    怎么使用IDEA
    面试中的Java链表
    设计模式解密(12)- 桥接模式
    Caused by: org.apache.catalina.LifecycleException: A child container failed during start
    设计模式解密(11)- 命令模式
  • 原文地址:https://www.cnblogs.com/nixu/p/11896786.html
Copyright © 2011-2022 走看看