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