React之propsTypes进行类型的检查

React中propsTypes的主要作用就是用于对传入参数的属性的检查。如

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

其中,

name: PropTypes.string

就是对name这个参数检查是否类型为string

以上的代码还可以写成是

import PropTypes from 'prop-types'

class Greeting extends React.Component{
    static porpTypes={
        name:React.PropTypes.string
    }
    render(){
        return(
            <h1>Hello,{this.props.name}</h1>
        );
    }
}

还可以写成通过ES5的方式来创建组件

import PropTypes from 'prop-types';

const Greeting = React.greatClass({
    propTypes:{
        name:React.PropTypes.string
    },
    render(){
        return(
            <h1>Hello,{this.props.name}</h1>
        );
    }
});

第三种创建方式：无状态

function Greeting(params) {
    return <h1>It is name:{params.name}</h1>
}
ReactDOM.render(
    <Greeting name="zansan"/>,
    mountNode
);

ps：

1、参数可以不传，不会报错；

2、无状态的意思是没有就this.state属性来保存状态

React之propsTypes进行类型的检查

悦读