React 学习-3

  1. Props

 state可变,props不可变,故子组件使用props较多

ar title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
 
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);
验证器
MyComponent.propTypes = {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
 
    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,
 
    //  React 元素
    optionalElement: React.PropTypes.element,
 
    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),
 
    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
 
    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
 
    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
 
    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
 
    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
 
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,
 
    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,
 
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/602816.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么快速分享视频文件?用二维码看视频的方法

怎样不通过传输下载分享视频内容呢&#xff1f;以前分享视频内容&#xff0c;大多会通过微信、QQ、邮箱、网盘等形式来传递。但是这种方式需要下载后才可以观看&#xff0c;不仅占用手机内存&#xff0c;而且效率也比较低&#xff0c;所以现在很多人会采用视频生成二维码的方式…

Could not resolve placeholder ‘xx.xxx.host’ in value “xxx“问题解决

Could not resolve placeholder ‘xx.xxx.host’ in value "xxx"问题解决 众多原因其中之一 springboot 项目&#xff0c;idea 配置apollo 时&#xff0c;运行指定了配置文件 uat 所以使用本地配置文件启动 时&#xff0c;一直去找uat 配置文件&#xff0c;结果自…

树莓派4b测量光照强度

1.BH1750光照强度连接图 2. BH1750工作原理 BH1750的通讯过程 第1步:发送上电命令。 发送的过程和第2步基本一致,把测量命令(0x10)改成上电命令(0x01)。第2步:发送测量命令。 下面图片上的例子,ADDR引脚是接GND的,发送的测量命令是“连续高分辨率测量(0x10)”。 发送数据…

Android11 InputReader分析

InputReader线程主要负责读取输入数据&#xff0c;并把数据交给InputDispatcher线程。本文以多指触摸屏为例&#xff0c;梳理一下InputReader的流程。 InputReader线程主要完成以下工作&#xff1a; 处理已有的输入设备处理新增或者移除的输入设备对输入设备产生的输入数据进行…

【数据结构与算法】力扣 226. 翻转二叉树

题目描述 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a; root [4,2,7,1,3,6,9] 输出&#xff1a; [4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a; root [2,1,3] 输出&#xff1a; [2,3,1…

【算法刷题 | 贪心算法09】4.30(单调递增的数字)

文章目录 16.单调递增的数字16.1题目16.2解法&#xff1a;贪心16.2.1贪心思路16.2.2代码实现 16.单调递增的数字 16.1题目 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的…

项目1:STM32+DHT11+FreeRTOS+emwin+LCD

【屏幕显示DHT11数据】 面向对象的思想编写硬件驱动程序&#xff0c;DHT11采集环境中的温湿度数据。使用FreeRTOS提供的任务间通信、同步、互斥&#xff0c;将DHT11的数据传递给显示任务。显示任务中&#xff0c;使用emWin中间件&#xff0c;制作屏幕的各种界面&#xff0c;并将…

程序员必备的8款工具软件,第5款简直绝了!

没错&#xff0c;今天又送福利了&#xff01;来给大家推荐一波好用的软件~ 都说程序员的电脑上有各种各样的软件工具、编辑器、插件等等&#xff0c;不同岗位的程序员使用的工具也不同。 今天就给你分享8款程序员必备的工具软件&#xff0c;看看是不是你常用的&#xff01; …

【最经典的79个】软件测试面试题(内含答案)备战“金三银四”

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…

锂电池管理芯片厂商拓品微电子授权世强硬创代理,产品涵盖充电/升压等系列

为进一步扩大自身品牌在国内的知名度&#xff0c;给更多硬科技企业提供锂电池管理芯片产品&#xff0c;南京拓品微电子有限公司&#xff08;下称“拓品微电子”&#xff0c;英文名&#xff1a;TOP POWER ASIC&#xff09;与拥有超30年历史的分销企业世强先进&#xff08;科技&a…

618热门好物大盘点,省心购物指南快看过来!

在618购物节即将拉开帷幕之际&#xff0c;整个互联网仿佛都弥漫着一种节日的热闹与期待。各大品牌纷纷亮出他们的杀手锏&#xff0c;推出了一系列诱人的优惠活动和特色产品&#xff0c;让人眼花缭乱&#xff0c;心动不已。如果你此刻正犹豫着该把哪一件宝贝收入囊中&#xff0c…

【JavaScript】原型

1. 什么是原型&#xff1f; 在 JavaScript 中&#xff0c;每个对象都有一个原型&#xff08;prototype&#xff09;&#xff0c;它是对象的一种特殊属性。原型对象包含了对象的属性和方法&#xff0c;当我们访问对象的属性或方法时&#xff0c;如果对象本身不存在这些属性或方…

电动车违规停放监测摄像机

随着电动车的普及和城市交通拥堵问题的加剧&#xff0c;电动车的停放管理也成为一个亟待解决的难题。为了维护城市交通秩序和提高停车效率&#xff0c;一种名为电动车违规停放监测摄像机应运而生&#xff0c;成为城市管理的利器。这种电动车违规停放监测摄像机&#xff0c;利用…

实战 | 实时手部关键点检测跟踪(附完整源码+代码详解)

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

如何理解GTX发送通道的用户接口?(高速收发器二)

前文讲解了高速收发器的QPLL及CPLL和差分时钟相关内容&#xff0c;如下图所示。本文就打开高速收发器通道的内部结构&#xff0c;进行简要讲解。 图21GTXE2_CHANNEL原始拓扑 收发器的内部框图如下所示&#xff0c;上半部分是发送通道&#xff0c;下半部分是接收通道&#xff0c…

Matlab实现分段函数拟合(分段点未知)| 源码分享 | 视频教程 | 三种分段函数拟合方法

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…

STM32 VS Code 扩展用户指南

系列文章目录 前言 一、视频教程快速入门 通过我们简单易学的视频教程&#xff0c;快速掌握新版本的使用方法&#xff1a; 二、功能描述 2.1 创建/导入项目 STM32 VS Code 扩展提供两种不同的项目创建选项&#xff1a; STM32CubeMX 项目&#xff1a; 这是一个依靠 CMake 作为…

(三十六)第 6 章 树和二叉树(二叉树的顺序存储表示实现)

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? str…

web前端学习笔记7-iconfont使用

7. iconfont的使用流程 字体图标使用较多的是阿里巴巴iconfont图标库,它是阿里巴巴体验团队推出的图标库和图标管理平台,提供了大量免费和可定制的矢量图标,以满足网页设计、平面设计、UI设计、应用程序开发和其他创意项目的需求。 官方网站:https://www.iconfont.cn/ 使用…

可视化数据报道:Kompas.ai如何用图表和动态效果讲述故事

在数字化时代&#xff0c;数据无处不在&#xff0c;而如何将这些数据转化为易于理解且吸引人的故事&#xff0c;成为信息传递的关键。数据可视化作为一种强有力的工具&#xff0c;能够帮助观众快速把握复杂信息的要点&#xff0c;增强记忆&#xff0c;并激发情感共鸣。本文将深…
最新文章