Wrapping stateless functional components

[mondomishi]

We should support wrapping stateless functional components (see here).

This shouldn't be too hard. Our decorator should check if the thing its wrapping has extended React.Component. If it has, do as we already do. If it hasn't (and is a function) then we make a class that extends React.Component that will essentially look something like

class WrappedComponent extends React.Component {
    render() {
        return wrapped_stateless_functional_component(this.props)
    }
}

and then use this WrappedComponent like we already do.

[mondomishi]

I'd imagine that (unless I'm missing something here) lots of people are going to be implementing this same functionality, which detects if a component extends React.Component or is a stateless functional component, and then converts to a class extending React.Component if it is stateless. So maybe that part of the solution should be separated into a standalone npm package.

[mondomishi]

Looks like react already has this feature for detecting if a component is stateless functional or not:

if (Component.isReactClass) {
    // then it is a class which extends React.Component
}

See here (and the commit which closed that issue) for more info.

[mondomishi]

Also, found this for turning stateless functional components into react classes.