React 入门学习笔记整理（三）—— 组件
1、定义组件
1）函数组件
function GreateH(props){
return <div>
<h2>hello,{props.name}</h2>
</div>
}
ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root'));
2）类组件
class GreateH extends React.Component{
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
ReactDOM.render(<GreateH name="kristy"/>, document.getElementById('root'));
组件名称必须以大写字母开头。
3）将组件单独写在一个js文件中，使用时必须定义或者引入它。
title.js 在这里需将组件导出
import React from "react";
class GreateH extends React.Component{
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
export default GreateH;
在index.js中必须引入
import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import Title from './components/title'
ReactDOM.render(<Title name="kristy"/>, document.getElementById('root'));
serviceWorker.unregister();
4）组件的返回值只能有一个根元素。
2、props默认值
1）函数式组件设置默认值,设置静态属性defaultProps 的值。
function GreateH(props){
return <div>
<h2>hello,{props.name}</h2>
</div>
}
GreateH.defaultProps = {name:'CoCo'};
ReactDOM.render(<GreateH />, document.getElementById('root'));
2）类组件设置默认值。
第一种与函数组件相同，设置类的静态属性defaultProps 的值。
第二种是定义在类里面：
class GreateH extends React.Component{
//在此处定义
static defaultProps = {name:'CoCo'};
render(){
return <div>
<h2>hello,{this.props.name}</h2>
</div>
}
}
3、使用 PropTypes 进行类型检查
1）运行 npm i prop-types --save 安装prop-types，并在组件中导入 import PropTypes from 'prop-types'。
如果再次启动的时候有报错，可以将依赖包删了再安装一次试试。
2）校验示例：
GreateH.propTypes = {
name: PropTypes.string
};
PropTypes
下面是使用不同验证器的例子：
MyComponent.propTypes = {
// 你可以将属性声明为以下 JS 原生类型
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
optionalNode: PropTypes.node,
// 一个 React 元素
optionalElement: PropTypes.element,
// 你也可以声明属性为某个类的实例，这里使用 JS 的
// instanceof 操作符实现。
optionalMessage: PropTypes.instanceOf(Message),
// 你也可以限制你的属性值是某个特定值之一
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// 限制它为列举类型之一的对象
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 一个指定元素类型的数组
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 一个指定类型的对象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 一个指定属性及其类型的对象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 你也可以在任何 PropTypes 属性后面加上 `isRequired`
// 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
requiredFunc: PropTypes.func.isRequired,
// 任意类型的数据
requiredAny: PropTypes.any.isRequired,
// 你也可以指定一个自定义验证器。它应该在验证失败时返回
// 一个 Error 对象而不是 `console.warn` 或抛出异常。
// 不过在 `oneOfType` 中它不起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},
// 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`
// 验证器，它应该在验证失败时返回一个 Error 对象。 它被用
// 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
// 或对象本身，第二个是它们对应的键。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
更多详细的说明可以查看文档：https://react.docschina.org/docs/typechecking-with-proptypes.html
React 入门学习笔记整理（三）—— 组件的更多相关文章
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
- React 入门学习笔记整理（六）—— 组件通信
1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...
- React 入门学习笔记整理（四）—— 事件
1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过thi ...
- React 入门学习笔记整理（五）—— state
1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...
- React 入门学习笔记整理（七）—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- React 入门学习笔记整理（九）——路由
(1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...
- React 入门学习笔记整理（一）——搭建环境
使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...
- React 入门学习笔记整理（二）—— JSX简介与语法
先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...
- React 入门学习笔记整理（八）—— todoList
APP.js import React, { Component,createRef,Fragment} from 'react'; import Todos from './components/t ...
随机推荐
- linux中ftp的安装过程记录[运维篇]
安装FTP的全过程记录,对于相同情况希望有所帮助.[centOS] 1.查询本机是否安装vsftpd: rpm -qa |grep vsftpd : 2.安装ftp服务 yum install vsf ...
- Linux 磁盘告警分析
硬件配置 cat /etc/redhat-release && dmidecode -s system-product-name && cat /proc/cpuinf ...
- 机器学习基石笔记：12 Nonlinear Transformation
一.二次假设 实际上线性假设的模型复杂度是受到限制的, 需要高次假设打破这个限制. 假设数据不是线性可分的,但是可以被一个圆心在原点的圆分开, 需要我们重新设计基于该圆的PLA等算法吗? 不用, 只需 ...
- shell编程中的if语句
if语句在任何编程中都是必不可少.至关重要的分支语句,shell也是如此,只不过各种编程中的方式和格式有点不太一样 shell编程中的if语句基本格式如下: if [ X$1 = XA ];then ...
- Linux学习笔记之十二————vim编辑器的分屏操作
一.分屏操作: sp: 上下分屏,后可跟文件名 vsp: 左右分屏,后可跟文件名 Ctr+w+w: 在多个窗口切换 二.启动分屏: 1.使用大写O参数进行垂直分屏 $ vim -On file1 fi ...
- Java并发框架AbstractQueuedSynchronizer(AQS)
1.前言 本文介绍一下Java并发框架AQS,这是大神Doug Lea在JDK5的时候设计的一个抽象类,主要用于并发方面,功能强大.在新增的并发包中,很多工具类都能看到这个的影子,比如:CountDo ...
- LearnOpenGL学习笔记（二）——着色器简单理解
着色器在OpenGL中发挥着重要作用,它就像一个画笔,将输入的数据流,转为数学坐标,再将三维坐标变成二维坐标(针对我们现在用的二维显示器,全息显示器肯是三维的),再把二维坐标实际的像素点位置(这里面肯 ...
- Maven教程（3）--Maven导入工程常见问题（编码、MavenArchiver、Lifecycle Mapping、maven install 没有反应）
常见错误: 常见错误一:These projects must be migrated to correctly function in this version of MyEclipse 需要修改编 ...
- SpringMVC教程1
一.SpringMVC介绍 1.MVC介绍 ==模型-视图-控制器(MVC== 是一个众所周知的以设计界面应用程序为基础的设计模式.它主要通过分离模型.视图及控制器在应用程序中的角色将业务逻辑从界面中 ...
- 【NET CORE微服务一条龙应用】第一章 网关使用与配置
简介 微服务的系统应用中,网关系统使用的是ocelot,ocelot目前已经比较成熟了 ocelot就不做介绍了,等整体介绍完后再进行各类扩展介绍,ocelot源码地址:https://github. ...