https://kotlinlang.org logo
#react
Title
# react
b

Björn Lilleike

07/29/2022, 3:48 PM
I am trying to render a tree of elements recursively with React FC.
Copy code
val RecursiveRenderer = FC<ArticyObjectProps> { props ->
    Typography {
        +"${props.articy.Id} of ${props.articy.Type}"
    }
    props.articy.Children?.forEach { sub: ArticyObject ->
        RecursiveRenderer { articy = sub }
    }
}
The compiler error is "Type checking has run into a recursive problem. Easiest workaround: specify types of your declarations explicitly". But what types I could declare more explicitly I have no idea. I have seen examples in Typescript so this should be possible, but there is no ignore option for this, is there?
t

turansky

07/29/2022, 4:43 PM
Copy code
val RecursiveRenderer : FC<ArticyObjectProps> = FC { ... }
?
b

Björn Lilleike

07/29/2022, 4:48 PM
Thank you. Now the new Issue is: "Variable 'FlowFragmentRenderer' must be initialized".
t

turansky

07/29/2022, 4:49 PM
Compiler error?
b

Björn Lilleike

07/29/2022, 4:52 PM
yes
I tricked the compiler into doing what I wanted with reading the FC-class from an enum.
Copy code
enum class ArticyTypes(val renderer: FC<ArticyObjectProps>) { GENERIC(renderer = RecursiveRenderer); }
Copy code
within The RecursiveRenderer I can now use:
ArticyTypes.GENERIC.renderer { articy = sub; level = props.level + 1 }
But would be nice to know a simpler working syntax.
t

turansky

07/30/2022, 10:14 PM
IR or Legacy?
b

Björn Lilleike

08/01/2022, 9:23 AM
Currently LEGACY, because it is a bit faster for continuous builds, which is the main pain point for our frontend devs
m

Mikhail

10/25/2023, 4:25 AM
I have found another way to avoid this compiler error - use lazy:
Copy code
val ListItem: FC<ListItemProps> by lazy {
  FC {
    //...
    ListItem {
      //...
    }
    //...
  }
}
It works well
78 Views