注意： 從 React v15.5 開始 ，React.PropTypes 助手函數已被棄用，建議使用 prop-types 庫 來定義contextTypes。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import PropTypes from
'prop-types'
;
class Greeting extends React.Component {
render() {
return
(
<h1>Hello, {
this
.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
|
PropTypes
這里是一個示例記錄提供的不同的驗證器：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
import PropTypes from
'prop-types'
;
MyComponent.propTypes = {
// 你可以聲明一個 prop 是一個特定的 JS 原始類型。
// 默認情況下，這些都是可選的。
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// 任何東西都可以被渲染:numbers, strings, elements,或者是包含這些類型的數組(或者是片段)。
optionalNode: PropTypes.node,
// 一個 React 元素。
optionalElement: PropTypes.element,
// 你也可以聲明一個 prop 是類的一個實例。
// 使用 JS 的 instanceof 運算符。
optionalMessage: PropTypes.instanceOf(Message),
// 你可以聲明 prop 是特定的值，類似於枚舉
optionalEnum: PropTypes.oneOf([
'News'
,
'Photos'
]),
// 一個對象可以是多種類型其中之一
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
// 一個某種類型的數組
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// 屬性值為某種類型的對象
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// 一個特定形式的對象
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// 你可以使用 `isRequired' 鏈接上述任何一個，以確保在沒有提供 prop 的情況下顯示警告。
requiredFunc: PropTypes.func.isRequired,
// 任何數據類型的值
requiredAny: PropTypes.any.isRequired,
// 你也可以聲明自定義的驗證器。如果驗證失敗返回 Error 對象。不要使用 `console.warn` 或者 throw ，
// 因為這不會在 `oneOfType` 類型的驗證器中起作用。
customProp:
function
(props, propName, componentName) {
if
(!/matchme/.test(props[propName])) {
return
new
Error(
'Invalid prop `
' + propName + '
` supplied to
' +
'
`
' + componentName + '
`. Validation failed.
'
);
}
},
// 也可以聲明`arrayOf`和`objectOf`類型的驗證器，如果驗證失敗需要返回Error對象。
// 會在數組或者對象的每一個元素上調用驗證器。驗證器的前兩個參數分別是數組或者對象本身，
// 以及當前元素的鍵值。
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'
Invalid prop `
' + propFullName + '
` supplied to
' +
'
`
' + componentName + '
`. Validation failed.'
);
}
})
};
|
要求單獨的 Child
使用 PropTypes.element ，可以指定僅將單一子元素傳遞給組件，作為子節點。
默認的 prop 值
可以通過賦值特定的 defaultProps 屬性為 props 定義默認值：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
class Greeting extends React.Component {
render() {
return
(
<h1>Hello, {
this
.props.name}</h1>
);
}
}
// 指定 props 的默認值：
Greeting.defaultProps = {
name:
'Stranger'
};
// 渲染為 "Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById(
'example'
)
);
|