[docs] Single Child
* Single Child belongs to Prop Validation, so it was moved there. * "throw" was changed to "warn".
Stefan Dombrowski committed
Nov 25, 2015 at 17:34 UTC
c6025da9525ab8ddc46a2d420612a5dcb3589e7a
1 file changed
+22
-22
docs/docs/05-reusable-components.md
+22
-22
@@ -78,6 +78,28 @@ React.createClass({
78
});
79
```
80
81
+### Single Child
82
+
83
+With `React.PropTypes.element` you can specify that only a single child can be passed to
84
+a component as children.
85
+
86
+```javascript
87
+var MyComponent = React.createClass({
88
+ propTypes: {
89
+ children: React.PropTypes.element.isRequired
90
+ },
91
+
92
+ render: function() {
93
+ return (
94
+ <div>
95
+ {this.props.children} // This must be exactly one element or it will warn.
96
+ </div>
97
+ );
98
+ }
99
+
100
+});
101
+```
102
+
103
## Default Prop Values
104
105
React lets you define default values for your `props` in a very declarative way:
@@ -115,28 +137,6 @@ ReactDOM.render(
137
);
138
```
139
118
-## Single Child
119
-
120
-With `React.PropTypes.element` you can specify that only a single child can be passed to
121
-a component as children.
122
-
123
-```javascript
124
-var MyComponent = React.createClass({
125
- propTypes: {
126
- children: React.PropTypes.element.isRequired
127
- },
128
-
129
- render: function() {
130
- return (
131
- <div>
132
- {this.props.children} // This must be exactly one element or it will throw.
133
- </div>
134
- );
135
- }
136
-
137
-});
138
-```
139
-
140
## Mixins
141
142
Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.