Document how to avoid wrapper in ReactTransitionGroup
Thanks to @rayshan for some rewording tips too!
Dan Abramov committed
Mar 28, 2016 at 23:02 UTC
531205065f52cf17c6465e262a1d090d33a8a0ff
1 file changed
+27
-2
docs/docs/10.1-animation.md
+27
-2
@@ -238,8 +238,6 @@ By default `ReactTransitionGroup` renders as a `span`. You can change this behav
238
</ReactTransitionGroup>
239
```
240
241
-Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write `component={List}` and your component will receive `this.props.children`.
242
-
241
Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `<ul>` with CSS class:
242
243
```javascript{1}
@@ -247,3 +245,30 @@ Any additional, user-defined, properties will become properties of the rendered
245
...
246
</ReactTransitionGroup>
247
```
248
+
249
+Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write `component={List}` and your component will receive `this.props.children`.
250
+
251
+### Rendering a Single Child
252
+
253
+People often use `ReactTransitionGroup` to animate mounting and unmounting of a single child such as a collapsible panel. Normally `ReactTransitionGroup` wraps all its children in a `span` (or a custom `component` as described above). This is because any React component has to return a single root element, and `ReactTransitionGroup` is no exception to this rule.
254
+
255
+However if you only need to render a single child inside `ReactTransitionGroup`, you can completely avoid wrapping it in a `<span>` or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:
256
+
257
+```javascript{1}
258
+var FirstChild = React.createClass({
259
+ render: function() {
260
+ var children = React.Children.toArray(this.props.children);
261
+ return children[0] || null;
262
+ }
263
+});
264
+```
265
+
266
+Now you can specify `FirstChild` as the `component` prop in `<ReactTransitionGroup>` props and avoid any wrappers in the result DOM:
267
+
268
+```javascript{1}
269
+<ReactTransitionGroup component={FirstChild}>
270
+ {someCondition ? <MyComponent /> : null}
271
+</ReactTransitionGroup>
272
+```
273
+
274
+This only works when you are animating a single child in and out, such as a collapsible panel. This approach wouldn't work when animating multiple children or replacing the single child with another child, such as an image carousel. For an image carousel, while the current image is animating out, another image will animate in, so `<ReactTransitionGroup>` needs to give them a common DOM parent. You can't avoid the wrapper for multiple children, but you can customize the wrapper with the `component` prop as described above.