宣告預設道具和 PropTypes
我們如何使用和宣告預設道具及其型別有重大變化。
React.createClass
在這個版本中,propTypes
屬性是一個 Object,我們可以在其中宣告每個 prop 的型別。getDefaultProps
屬性是一個返回 Object 以建立初始道具的函式。
import React from 'react';
const MyComponent = React.createClass({
propTypes: {
name: React.PropTypes.string,
position: React.PropTypes.number
},
getDefaultProps() {
return {
name: 'Home',
position: 1
};
},
render() {
return (
<div></div>
);
}
});
export default MyComponent;
React.Component
此版本使用 propTypes
作為實際 MyComponent 類的屬性,而不是屬性作為 createClass
定義物件的一部分。
getDefaultProps
現在已經改變為類名為 defaultProps 的 Object 屬性,因為它不再是 get
函式,它只是一個 Object。它避免了更多的 React 樣板,這只是簡單的 JavaScript。
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
MyComponent.propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
MyComponent.defaultProps = {
name: 'Home',
position: 1
};
export default MyComponent;
另外,propTypes
和 defaultProps
還有另一種語法。如果你的構建已啟用 ES7 屬性初始值設定項,則這是一個快捷方式:
import React from 'react';
class MyComponent extends React.Component {
static propTypes = {
name: React.PropTypes.string,
position: React.PropTypes.number
};
static defaultProps = {
name: 'Home',
position: 1
};
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default MyComponent;