`transition` doesn't work when slide is in subcomponent

If I have a Deck like this:

    <Deck transition={['slide']} transitionDuration={500} theme={theme}>
        <Slide transition={['slide']}>
            <Heading size={1} fit lineHeight={1}>
                About Me
            </Heading>
        </Slide>
    </Deck>

it works fine, but if I extract the Slide into a separate component:

export class AboutMe extends React.Component {
    render() {
        return (
            <Slide transition={['slide']}>
                <Heading size={1} fit lineHeight={1}>
                    About Me
                </Heading>
            </Slide>
        );
    }
}

the transition stops working and the slide never… slides in. If I remove the transition, the slide appears in the correct place, but no animation.

[ahfarmer]

@kenwheeler

trying to find a good way to not have to recurse too far

Can’t you recurse until you hit a <Slide>? I’m new to Spectacle but it looks like these are the only components that ever exist within <Deck>:

• Slide
• SlideSet
• Intermediate component that renders Slide components or other intermediate components

First thing I tried to do when I got the boilerplate was to put my slides into separate files and it was pretty frustrating.

[mAAdhaTTah]

Hacky workaround: convert the slide from a ES6 class component to a stateless function component and render it by calling the function, rather than passing the function around as a component:

    <Deck transition={['slide']} transitionDuration={500} theme={theme}>
        <Slide transition={['slide']}>
            <Heading size={1} fit lineHeight={1}>
                Meet
            </Heading>
            <Heading size={1} fit lineHeight={1}>
                <code>brookjs</code>
            </Heading>
            <Text textSize={'40px'}>
                A framework for building streaming web applications.
            </Text>
        </Slide>
        {AboutMe()} <--- here
    </Deck>