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 入门学习笔记整理(三)—— 组件的更多相关文章

  1. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  2. React 入门学习笔记整理(六)—— 组件通信

    1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...

  3. React 入门学习笔记整理(四)—— 事件

    1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过thi ...

  4. React 入门学习笔记整理(五)—— state

    1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...

  5. React 入门学习笔记整理(七)—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

  6. React 入门学习笔记整理(九)——路由

    (1)安装路由 React-router React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api. Re ...

  7. React 入门学习笔记整理(一)——搭建环境

    使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...

  8. React 入门学习笔记整理(二)—— JSX简介与语法

    先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...

  9. React 入门学习笔记整理(八)—— todoList

    APP.js import React, { Component,createRef,Fragment} from 'react'; import Todos from './components/t ...

随机推荐

  1. TCP/UDP OSI_layer 4

    这篇文章主要复习OSI模型中的第4层:传输层,主要包含两个协议TCP .UDP. Transport 传输层 多路复用: 一个协议为多个上层协议或者多个上层应用提供一个统一的服务 TCP/UDP 通过 ...

  2. Java的组合排列问题

    从4个人中选2个人参加活动,一共有6种选法. 从n个人中选m个人参加活动,一共有多少种选法?C(m/n)=C((m-1)/(n-1))+C(m/(n-1))数学算法 public class Main ...

  3. H264三种码率控制方法(CBR, VBR, CVBR)

    CBR(Constant Bit Rate)是以恒定比特率方式进行编码,有Motion发生时,由于码率恒定,只能通过增大QP来减少码字大小,图像质量变差,当场景静止时,图像质量又变好,因此图像质量不稳 ...

  4. code128 C语言实现

    https://blog.csdn.net/walk_ing/article/details/52712641 参考链接 1,具有A.B.C三种不同的编码类型,可提供标准ASCII中128个字元(字元 ...

  5. 第七章:四大组件之Service

    Service是Android系统中的一种组件,它跟Activity的级别差不多,但是它不能自己运行,只能后台运行,并且可以和其他组件进行交互.Service是没有界面的长生命周期的代码.Servic ...

  6. PyCharm的基本快捷键和配置简介

    快捷键 1.编辑(Editing)Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完成Ctr ...

  7. SSM整合(四)-整合后配置文件汇总

    1.新建Maven项目创建pom.xml pom.xml内容如下 <project xmlns="http://maven.apache.org/POM/4.0.0" xml ...

  8. jar包版本介绍(beta,alpha,release),软件的版本介绍

    α(Alpha) 此版本表示该软件仅仅是一个初步完成品,通常只在软件开发者内部交流,也有很少一部分发布给专业测试人员.一般而言,该版本软件的bug(漏洞)较多,普通用户最好不要安装.主要是开发者自己对 ...

  9. set 和hash_set和海量数据的处理问题

    什么样的结构决定其什么样的性质,因为set/map/multiset/multimap都是基于RB-tree之上,所以有自动排序功能, 而hash_set/hash_map/hash_multiset ...

  10. elk + filebeat,6.3.2版本简单搭建,实现我们自己的集中式日志系统

    前言 刚从事开发那段时间不习惯输出日志,认为那是无用功,徒增代码量,总认为自己的代码无懈可击:老大的叮嘱.强调也都视为耳旁风,最终导致的结果是我加班排查问题,花的时间还挺长的,要复现问题.排查问题等, ...