React 入门学习笔记整理(三)—— 组件
程序员文章站
2022-06-21 16:26:31
1、定义组件 1)函数组件 2)类组件 组件名称必须以大写字母开头。 3)将组件单独写在一个js文件中,使用时必须定义或者引入它。 title.js 在这里需将组件导出 在index.js中必须引入 4)组件的返回值只能有一个根元素。 2、props默认值 1)函数式组件设置默认值,设置静态属性de ......
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.' ); } }) };
更多详细的说明可以查看文档:
上一篇: JS之字符串和数组
下一篇: Docker容器的使用方法简单示例
推荐阅读
-
详解Vue学习笔记入门篇之组件的内容分发(slot)
-
React 入门学习笔记整理(一)——搭建环境
-
javascript高级程序设计(第三版)学习笔记(一) 正则表达式整理
-
C#线程学习笔记十:async & await入门三
-
React 入门学习笔记整理目录
-
2020培训0706-0708【web入门】笔记「三」CSS专题整理
-
sencha touch2学习笔记(三)----form表单容器及其子组件
-
sencha touch2学习笔记(三)----form表单容器及其子组件
-
React学习笔记之高阶组件应用
-
element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记(三)