React Props
state 和 props 主要的區別在於 props 是不可變的，而 state 可以根據與使用者互動來改變。這就是為什麼有些容器元件需要定義 state 來更新和修改資料。 而子元件只能通過 props 來傳遞資料。
使用 Props
以下例項演示瞭如何在元件中使用 props：
React 例項
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="itread01"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
嘗試一下 ?
例項中 name 屬性通過 props.name 來獲取。
預設 Props
你可以通過元件類的 defaultProps 屬性為 props 設定預設值，例項如下：
React 例項
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
HelloMessage.defaultProps = {
name: 'itread01'
};
const element = <HelloMessage/>;
ReactDOM.render(
element,
document.getElementById('example')
);
嘗試一下 ?
State 和 Props
以下例項演示瞭如何在應用中組合使用 state 和 props 。我們可以在父元件中設定 state， 並通過在子元件上使用 props 將其傳遞到子元件上。在 render 函式中, 我們設定 name 和 site 來獲取父元件傳遞過來的資料。
React 例項
class WebSite extends React.Component {
constructor() {
super();
this.state = {
name: "入門教學",
site: "https://www.itread01.com"
}
}
render() {
return (
<div>
<Name name={this.state.name} />
<Link site={this.state.site} />
</div>
);
}
}
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
class Link extends React.Component {
render() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
}
ReactDOM.render(
<WebSite />,
document.getElementById('example')
);
嘗試一下 ?
Props 驗證
React.PropTypes 在 React v15.5 版本後已經移到了 prop-types 庫。
<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
Props 驗證使用 propTypes，它可以保證我們的應用元件被正確使用，React.PropTypes 提供很多驗證器 (validator) 來驗證傳入資料是否有效。當向 props 傳入無效資料時，JavaScript 控制檯會丟擲警告。
以下例項建立一個 Mytitle 元件，屬性 title 是必須的且是字串，非字串型別會自動轉換為字串 ：
React 16.4 例項
var title = "入門教學";
// var title = 123;
class MyTitle extends React.Component {
render() {
return (
<h1>Hello, {this.props.title}</h1>
);
}
}
MyTitle.propTypes = {
title: PropTypes.string
};
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
嘗試一下 ?
React 15.4 例項
var title = "入門教學";
// var title = 123;
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
ReactDOM.render(
<MyTitle title={title} />,
document.getElementById('example')
);
嘗試一下 ?
更多驗證器說明如下：
MyComponent.propTypes = {
// 可以宣告 prop 為指定的 JS 基本資料型別，預設情況，這些資料是可選的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的物件 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符宣告 prop 為類的例項。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 來限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多個物件型別中的一個
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
// 指定型別組成的陣列
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定型別的屬性構成的物件
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 引數的物件
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 任意型別加上 `isRequired` 來使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意型別
requiredAny: React.PropTypes.any.isRequired,
// 自定義驗證器。如果驗證失敗需要返回一個 Error 物件。不要直接使用 `console.warn` 或拋異常，因為這樣 `oneOfType` 會失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
}
}
}
}