react中props 的使用及进行限制的方法


Posted in Javascript onApril 28, 2021

组件的props( props是一个对象 )

作用:接收传递给组件的数据
特点:

  • 可以给组件传递任意类型的数据
  • props是只读的对象,只能读取属性的值,无法修改对象
  • 注意:使用类组件时,如果写了构造函数,应该将props传递给super(),否则,无法在构造函数中获取到

props props 的使用

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名:{name}</li>
          <li>性别:{sex}</li>
          <li>年龄:{age+1}</li>
        </ul>
      )
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

对props进行限制

一定要引入 prop-types.js 否则会报错

<div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作dom -->
  <script src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx 转换为 js -->
  <script src="../js/babel.min.js"></script>
  <!-- 引入prop-types, 用于对组件标签属性进行限制 引入后全局就多了一个对象 PropTypes -->
  <script src="../js/prop-types.js"></script>

  <script type='text/babel'>
  // 创建组件
  class Person extends React.Component{
    render() {
      console.log(this);
      const{name,age,sex} = this.props
      return(
        <ul>
          <li>姓名:{name}</li>
          <li>性别:{sex}</li>
          <li>年龄:{age+1}</li>
        </ul>
      )
    }
  }
  // 限制规则
  Person.propTypes = {
    // 限制name 内容为字符串  isRequired 表示该内容为必须的不能省略
    name:PropTypes.string.isRequired,
    // 限制sex为字符串
    sex: PropTypes.string,
    // 限制age为数值
    age: PropTypes.number,
    // 限制speak为函数
    speak: PropTypes.func
  }
  Person.defaultProps = {
    sex:'男',// sex 默认值 为男
    age:18,
    speak: function() {
        return [1];
    }
  }
  // 渲染组件到页面
  ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
  ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))

  const p = {name:'老刘',age:18,sex:'女'}
  // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
  
  ReactDOM.render(<Person {...p} />,document.getElementById('test3'))

  </script>

Vue 对props进行限定

我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查
type 可以是下列原生构造函数中的一个:

String
Number
Boolean
Array
Object
Date
Function
Symbol

额外的,type 还可以是一个自定义的构造函数,并且通过 instanceof 来进行检查确认。例如,给定下列现成的构造函数:

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用:

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

来验证 author prop 的值是否是通过 new Person 创建的。

到此这篇关于react 中的 props 的使用以及进行限制的文章就介绍到这了,更多相关react props进行限制内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
原生js实现随机点餐效果
Dec 10 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
React Hook用法示例详解(6个常见hook)
vue使用v-model进行跨组件绑定的基本实现方法
为什么node.js不适合大型项目
JavaScript控制台的更多功能
Apr 28 #Javascript
JavaScript使用canvas绘制坐标和线
JS Object构造函数之Object.freeze
Apr 28 #Javascript
关于vue中如何监听数组变化
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
angular多语言配置详解
2019/05/16 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
详解Django中的form库的使用
2015/07/18 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
pyenv命令管理多个Python版本
2017/03/26 Python
python实现发送邮件功能
2017/07/22 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
财政局长自荐信范文
2013/12/22 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
python如何读取.mtx文件
2021/04/22 Python
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
服务器SVN搭建图文安装过程
2022/06/21 Servers