Non-class components

[fisx]

mkView and family generate components that are class, not functions [1]. In some situations, like when migrating react-sticky to 6.0.1 [2], we need a function. Perhaps there is an easy way to write something like:

viewToFunction :: View a -> View a

That takes a class-based (or even function-based?) component and wraps it into a function that is passed the props and returns the react element tree.

I'm a bit fuzzy about the details here myself. The next step for me would be to look up the View type and the places where it is used.

• [1] https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html#components-can-be-classes-or-functions
• [2] https://github.com/captivationsoftware/react-sticky

[danse]

As far as i could understand, pure components were added to React later than class-based components. I've been looking at the React code, and as far as i understand there are two different constructors, maybe the right one is picked by the JSX layer. In any case i don't understand how can a new version of Sticky get this wrong. Whichever constructor is defined, i imagine that a React component will expose always a consistent interface, unless there is an error in the version of React that is used by react-hs. In that case, this issue could be closed by updating the dependency.

In other terms, i can't imagine a situation where you "need a function", because after initialisation all components should look the same. Anyway i'm still studying the issue

[fisx]

I'm not sure I understand what you are saying, which is probably due to some mis-alignment between my understanding of react.js and the real thing.

To clarify: when I talk about class-based and function-based components I am talking about the js level entirely. js classes, js functions.

In the case of sticky, the sticky component is class-based (at least I think it is), but it expects a function as children. I suspect this is not a big deal. In pseudo-code, we just need to pass `(props) => <children>;tostickyrather thanchildren`.

Not sure if that helps?

[danse]

As far as i understand, functions or classes are just different ways to construct a component. After initialisation, every component should expose the same runtime interface. I might be wrong, i cannot point to the related code in React

[danse]

Now i see what you mean. In order to pass properties to it, Sticky requires a non-initialised component, and it initialises the component as a function

[fisx]

Yes, I think that's it.