8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

一. PropTypes 与 DefaultProps 官方文档

  1. PropTypes 属性校验

    引入 PropTypes

      import PropTypes from ‘prop-types‘;

    强校验 props 属性

    eg:

      import React, { Component } from ‘react‘

      import PropTypes from ‘prop-types‘

      class TodoItem extends Component{

        constructor(props){

          super(props);

        }

      }

      // 校验 传递过来的 value 为 string 类型

      // 校验 传递过来的 itemDelete 为 function 类型

      // 校验 传递过来的 index 为 string 类型 并且必须要传递

      // 如果传递的数据不对 会在 控制太报一个警告

      TodoItem.propTypes = {

        value: PropTypes.string,

        itemDelete: PropTypes.func,

        index: PropTypes.string.isRequired

      }

      export default TodoItem;

  2.DefaultProps 设置默认值

    eg:

      import React, { Component } from ‘react‘

      class TodoItem extends Component{

        constructor(props){

          super(props);

        }

      }

      // 设置 props 的 test默认属性为 hello world

      TodoItem.defaultProps = {

        test: ‘hello world‘

      }

      export default TodoItem;

二. Props , State , render 函数 关系

  // 当组件 的 props 和 state 发生改变时 render 方法会重新执行

  // 当父组件 的 render 函数被运行时, 子组件 的 render 都会被运行

原文地址:https://www.cnblogs.com/zonehoo/p/11637109.html

时间: 2024-10-10 03:45:06

8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系的相关文章

react中属性默认值是true?

看到项目代码中 return ( <MyWebView state="Login" title="登录app" ref="login" rightComponent url={url} onMessage={this.onMessage} {...this.props} /> ) 里面的rightComponent没有声明值,在父组件中是当成一个布尔值用的,那该值是true还是false?找了下资料,说若没有值,而且没有提供默认值,则

ES6 函数参数的默认值

基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('kkk');//kkk world 这种写法的缺点在于: 如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用.如果在调用函数的时候,传入的y参数是一个空字符串,那么y就会被修改为默认值. 避免这个问题,需要先判断一下:1.通过判断值是否等于undefined,2.判断arguments.

typescript 关于class属性类型定义被属性默认值覆盖的问题及解决方式

问题来源于 React.component的第二个参数的类型定义问题,我构建了以下简化demo,方便描述问题: class P<STATE> { public state: STATE; } interface Obj { arr: Obj[]; } class Test1 extends P<Obj> { public state = {arr: []}; func(obj: Obj) { this.state.arr.push(obj);// 这里ts在obj上抛错 Error

修正或添加字段默认值约束的名称

旧项目中的数据库约束名称不规范,写了个脚本重新修改. 1. 名称重新修改为已有的默认值约束的名称为'DF_' + 表名 + 字段名: 2. 没有设置默认值约束的列设置默认值,字符串为空,数值为0: 3. 时间字段除了addtime不加默认值: --修正或添加字段默认值约束的名称为DF_表名_字段 /* SELECT tabName= LOWER(O.name), --表名 colName=LOWER(C.name), --字段名 coltype= LOWER(T.name), --类型 dfVa

ES6: 参数默认值及中间域

下午看了一章 ECMA-262 by Dmitry Soshnikov, 现在稍稍来小结下ES6中的参数默认值以及由此产生的参数中间作用域. 原文地址: http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/#conditional-intermediate-scope-for-parameters ES6中的参数默认值用法和其他语言都差不多,直接在参数后赋值: 1 function log(me

C++的参数默认值和哑元

一. 函数的参数支持哑元 哑元是一种没有参数名的参数,主要是为了函数间的区别以及向前兼容 二. 函数的参数可以指定默认值,当调用时没有传参,就以默认值进行函数调用. 三. 有默认值的形参必须靠右,声明和定义分开时,默认值必需在声明中指定,定义中不再指定. //默认参数 与 哑元 #include <iostream> using namespace std; /* 1 void print(int *a,int n){ for (int i = 0; i<n; i++) { cout &

C++函数带默认值的几种情形

1. 默认参数的规则 默认值定义 C++支持函数参数带默认值.这里所谓的默认值,指的是在调用函数时,可以不指定某些参数,编译器会自动把默认值传递到函数调用中. 默认值位置 指定默认值的参数必须位于形参列表最右端,从右往左.否则会出现二义性,编译器无法处理. 默认值设置 默认值可以在函数声明或函数定义中设置,只要保证不出现参数重定义即可. 2.默认参数示例 在函数声明中设置默认值 这是最常见的一种情形.主要有以下两种声明方式: 声明中给参数赋默认值 声明中用类型指定默认值 float area(f

ES6函数参数默认值作用域的模拟原理实现与个人的一些推测

一.函数参数默认值中模糊的独立作用域 我在ES6入门学习函数拓展这一篇博客中有记录,当函数的参数使用默认值时,参数会在初始化过程中产生一个独立的作用域,初始化完成作用域会消失:如果不使用参数默认值,不会产生这个作用域:产生疑问是因为这段代码: var x = 1; function foo(x, y = function () {x = 2;}) { var x = 3; y(); console.log(x); }; foo();//3 foo(4);//3 console.log(x);//

关于函数的默认值与python闭包以及迭代器

# 在函数中如果默认值参数是一个可变的数据类型, 如果有人调用的时候改变了他. 其他位置看到的也跟着改变了 def fn(val,list=[]): list.append(val) return list print(fn(5)) # 这个位置我们给val传值了打印的结果一定是[5] print(fn(6)) # 这个位置我们继续传值发现结果是[5, 6],那么也就是说函数中参数的默认值是同一个,而不是每次调用函数生产新的默认值 # # 在函数中如果默认值参数是一个可变的数据类型, 如果有人调