Handling recursive react components

[Tomáš Lembacher]

Hi,

how are you handling recursive react components? For example if I want to build menu/menuItem when descendat of menu can be another menu with several menuItems? Is there any way to create recursive components?

Thank you

[Daniel Steigerwald]

I think, yes. Check React forum for example. Remember, you can pass component as props, one or many via children.

--
You received this message because you are subscribed to the Google Groups "Este.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to estejs+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tomáš Lembacher]

Using props to pass component is basically a good idea. I'm using your way of writing components in coffee script with DI, but to be honest I'm not sure, how to pass current component I'm in as prop.

class MenuList
    ###*
        @param {MenuItem} menuItem
        @constructor
    ###
    constructor: (menuItem) ->
        {ul} = React.DOM

        @component = React.createFactory(
                React.createClass(
                    displayName: 'menuList'
                    render: ->
                        nodes = @props.data.map((node) ->
                            # HOW TO ACCESS MenuList HERE?
                            menuItem.component({link: node.link, icon: node.icon, name: node.name, subItems: node.subItems})
                        )
                        ul({}, nodes)
                )
        )



Dne čtvrtek, 18. prosince 2014 22:54:59 UTC+1 Daniel Steigerwald napsal(a):

I think, yes. Check React forum for example. Remember, you can pass component as props, one or many via children.

On Thursday, December 18, 2014, Tomáš Lembacher <tomas.l...@gmail.com> wrote:

Hi,

how are you handling recursive react components? For example if I want to build menu/menuItem when descendat of menu can be another menu with several menuItems? Is there any way to create recursive components?

Thank you

--
You received this message because you are subscribed to the Google Groups "Este.js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to estejs+unsubscribe@googlegroups.com.

[Daniel Steigerwald]

Btw, you should be able map data to react recursively, you can pass react component as prop or as array of children via children props. Remember to use React key attribute then.

https://github.com/steida/songary/blob/2b40d85e66a5e34ab71e0ccb4923f8c162340c90/app/client/js/react/pages.coffee#L38
https://github.com/steida/songary/blob/2b40d85e66a5e34ab71e0ccb4923f8c162340c90/app/client/js/songs/react/song.coffee#L27

To unsubscribe from this group and stop receiving emails from it, send an email to estejs+un...@googlegroups.com.

[Tomáš Lembacher]

Unfortunately Im' not sure I understand that parts of your code...

I will try to be more specific with my problem. I'm sure, I just have to thing about it outside the box but my lack of experience on this field is not allowing it.

I'm rewriting some jQuery component into react. It is some kind of menu. There is a list of options (MenuList) and each of the items is MenuItem (even a leaf or just a heading for another list) and MenuItem if some subItems are defined.
This is obviously not working because of circular dependencies, but I really don't know how to fix it.

I would apreciate any idea.

Thank you


Here is code I'm talking about:

class RollDownMenuList

    ###*
        @param {MenuItem} menuItem
        @constructor
    ###
    constructor: (menuItem) ->
        {ul} = React.DOM

        @component = React.createFactory(
                React.createClass(
                    displayName: 'menuList'
                    render: ->
                        nodes = @props.data.map((node) ->

                            rollDownMenuItem.component({link: node.link, icon: node.icon, name: node.name, subItems: node.subItems})

                        )
                        ul({}, nodes)
                )
        )

class MenuItem
    ###*
        @param {MenuList} menuList
        @constructor
    ###
    constructor: (menuList) ->
        {li, a, img, span} = React.DOM

        @component = React.createFactory(
                React.createClass(
                    displayName: 'menuItem'
                    render: ->
                        subNodes = if(Array.isArray(@props.subItems)) then menuList.component({data: @props.subItems}) else ''

                        li({},
                            a({href: @props.link},
                                img({src: @props.icon, alt: @props.name}),
                                span({}, @props.name)
                            ),
                            subNodes
                        )
                )
        )

Dne pátek, 19. prosince 2014 3:09:26 UTC+1 Daniel Steigerwald napsal(a):

[Daniel Steigerwald]

Ask Google or React forum, sorry. This is not related to Este but React.