I’m trying to write a React app that acts like a tree, where one React element has children that are the same type of React element, nested arbitrarily deep. When I try to compile it, it says this:
FAILED: TreeElement has a self cycle
What should I do about this?
I worked around it by using:
React.createElement(make, makeProps(…))
But now it’s warning me
unused rec flag.
It’s definitely not unused, and removing it breaks compilation.
Hi @nickretallack do you have some example code you can share that shows the problem?
1 Like
@nickretallack Usually i create a normal recursive function rather than a component (module) if i want to create a recursive component. You can check an example here. I hope this is what you are looking for.
This tree operations demo is created using this idea. Github repo is here.
1 Like
Looks like the “unused rec flag” warning is a known issue: Recursive @react.component wrongly warn about unused rec flag · Issue #4511 · rescript-lang/rescript-compiler · GitHub
My recursive element is here: nameless-language/ExecutionScopeTree.res at master · nickretallack/nameless-language · GitHub
I had to use React.createElement because I can’t just reference the module’s name inside itself by default it seems. It would be nice if i could though, because the React.createElement syntax is much more verbose than a JSX element would have been in this case.
You can definitely reference a module’s name inside itself, it just has to be a syntactic module, not a file:
module rec Button: {
@react.component
let make: (~count: int) => React.element
} = {
@react.component
let make = (~count) => {
let (times, btn) = switch count {
| 0 => ("0 times", <Button count=1 />)
| _ => ("n times", React.null)
}
<button>
{React.string("Click me ")}
{React.string(times)}
btn
</button>
}
}
(I realize the example is nonsensical, it’s just to show the idea.)
5 Likes