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

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