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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
jquery indexOf使用方法
Aug 19 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
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
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
EsLint入门学习教程
2017/02/17 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python解决网站的反爬虫策略总结
2016/10/26 Python
详解Python import方法引入模块的实例
2017/08/02 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
费用会计岗位职责
2014/01/01 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
培训专员岗位职责
2014/02/26 职场文书
活动总结报告格式
2014/05/09 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
遗嘱格式范本
2015/08/07 职场文书