React之propsTypes進行型別的檢查
阿新 • • 發佈:2019-02-19
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屬性來儲存狀態