Swap components (#8735)
It's better to delare component before using.
Dmitry Zhuravlev-Nevsky committed
Jan 10, 2017 at 13:48 UTC
65bf19029de40d3248b25f38e6af8982fbce454f
1 file changed
+8
-8
docs/docs/jsx-in-depth.md
+8
-8
@@ -348,14 +348,6 @@ function Hello(props) {
348
Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
349
350
```js{4,13}
351
-function ListOfTenThings() {
352
- return (
353
- <Repeat numTimes={10}>
354
- {(index) => <div key={index}>This is item {index} in the list</div>}
355
- </Repeat>
356
- );
357
-}
358
-
351
// Calls the children callback numTimes to produce a repeated component
352
function Repeat(props) {
353
let items = [];
@@ -364,6 +356,14 @@ function Repeat(props) {
356
}
357
return <div>{items}</div>;
358
}
359
+
360
+function ListOfTenThings() {
361
+ return (
362
+ <Repeat numTimes={10}>
363
+ {(index) => <div key={index}>This is item {index} in the list</div>}
364
+ </Repeat>
365
+ );
366
+}
367
```
368
369
Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.