欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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.'
      );
    }
  })
};

更多详细的说明可以查看文档: