The library for web and native user interfaces.
[docs] Prop validation + cleanup default props
Paul O’Shannessy committed
Jul 17, 2013 at 09:47 UTC
94573545f3ece778f9c52686fb1b53f19e43dc48
1 file changed
+37
-4
docs/docs/05-reusable-components.md
+37
-4
@@ -12,14 +12,47 @@ When designing interfaces, break down the common design elements (buttons, form
12
13
## Prop Validation
14
15
-As your app grows it's helpful to ensure that your components are used correctly. We do this using `propTypes`.
15
+As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify `propTypes`. `React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, an error will be thrown. Here is an example documenting the different validators provided:
16
17
-** TODO zpao **
17
+```javascript
18
+React.createClass({
19
+ propTypes: {
20
+ // You can declare that a prop is a specific JS primitive. By default, these
21
+ // are all optional.
22
+ optionalArray: React.PropTypes.array,
23
+ optionalBool: React.PropTypes.bool,
24
+ optionalFunc: React.PropTypes.func,
25
+ optionalNumber: React.PropTypes.number,
26
+ optionalObject: React.PropTypes.object,
27
+ optionalString: React.PropTypes.string,
28
+
29
+ // You can ensure that your prop is limited to specific values by treating
30
+ // it as an enum.
31
+ optionalEnum: React.PropTypes.oneOf(['News','Photos']),
32
+
33
+ // You can also declare that a prop is an instance of a class. This uses
34
+ // JS's instanceof operator.
35
+ someClass: React.PropTypes.instanceOf(SomeClass),
36
+
37
+ // You can chain any of the above with isRequired to make sure an error is
38
+ // thrown if the prop isn't provide.
39
+ requiredFunc: React.PropTypes.func.isRequired
40
+
41
+ // You can also specify a custom validator.
42
+ customProp: function(props, propName, componentName) {
43
+ if (!/matchme/.test(props[propName])) {
44
+ throw new Error('Validation failed!')
45
+ }
46
+ }
47
+ },
48
+ /* ... */
49
+});
50
+```
51
52
53
## Default Prop Values
54
22
-React let's you define default values for your `props` in a very declarative way:
55
+React lets you define default values for your `props` in a very declarative way:
56
57
```javascript
58
var ComponentWithDefaultProps = React.createClass({
@@ -32,7 +65,7 @@ var ComponentWithDefaultProps = React.createClass({
65
});
66
```
67
35
-The result of `getDefaultProps()` will be cached and used to ensure that `this.props.value` will have a value if it was not specified by the parent component`. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
68
+The result of `getDefaultProps()` will be cached and used to ensure that `this.props.value` will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
69
70
71
## Transferring Props: A Shortcut