iOS开发笔记 一天到晚游泳的余

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 493|回复: 0

[React] 第五讲 React组件属性的验证propTypes和默认值getDefaultProps

[复制链接]
  • TA的每日心情
    发光
    2019-4-19 14:50
  • 签到天数: 366 天

    [LV.9]以坛为家II

    发表于 2017-12-25 16:06:32 | 显示全部楼层 |阅读模式
    1、前面有讲到自定义一个组件一般的写法是在React.createClass()方法中传入的对象实现render部分;
    [JavaScript] 纯文本查看 复制代码
        var MyTitle = React.createClass({
          render:function(){
            return <h1>{this.props.title}</h1>;
          }
        });

    2、其实这个对象中除了render外还有其他的方面的实现,如属性验证propTypes,写法和render类似
    [JavaScript] 纯文本查看 复制代码
        var MyTitle = React.createClass({
          propTypes:function(){
            // 验证title属性,React.propTypes.string.isRequest为必须为字符串
            title:React.propTypes.string.isRequest
          },
          render:function(){
            return <h1>{this.props.title}</h1>;
          }
        });

    2.1、加上了属性验证后,在MyTitle组件中如果有title属性值的赋值则必须为字符串,如果不是则报错;
    [JavaScript] 纯文本查看 复制代码
        ReactDOM.render(
          // 不显示<MyTitle title=123 />
          <MyTitle title="abc" />,
          document.getElementById("container")
        );

    3、类似属性验证的propTypes还有默认值getDefaultProps,写法也一样
    [JavaScript] 纯文本查看 复制代码
        var MyTitle = React.createClass({
          // 验证title属性,React.propTypes.string.isRequest为必须为字符串
          propTypes:function(){
            title:React.propTypes.string.isRequest
          },
          // 设置默认值,title如果为空则显示sian
          getDefaultProps:function(){
            return{
              title:"sian"
            }
          },
          render:function(){
            return <h1>{this.props.title}</h1>;
          }
        });
    
        ReactDOM.render(
          // 不显示<MyTitle title=123 />
          <MyTitle />,
          document.getElementById("container")
        );

    4、效果演示链接:http://www.yusian.com/react/props/others.html
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2020-8-15 23:00 , Processed in 0.190415 second(s), 19 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表