1. 程式人生 > >React之propsTypes進行型別的檢查

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屬性來儲存狀態