Recursive components in reason-react?

[saresend]

I'm attempting to write a simple file tree viewer with reason react that I'd like to do recursively, to support arbitrary depths of files. However, at least my first couple attempts have failed. Is there plans for support of recursive components, and if not what workarounds exist to achieve this type of functionality?

[cristianoc]

This style should work:

let c1 = ReasonReact.statelessComponent("C1");
let c2 = ReasonReact.statelessComponent("C2");

type t1 =
  | C1(int, option(t2))
and t2 =
  | C2(string, option(t1));

let rec make1 = (~x1, _children) => {
  let C1(i, x2) = x1;
  let theInt = <div> {i->string_of_int->ReasonReact.string} </div>;
  {
    ...c1,
    render: _ =>
      switch (x2) {
      | None => theInt
      | Some(x2) =>
        module M2 = {
          let make = make2;
        };
        <div> theInt <M2 x2 /> </div>;
      },
  };
}

and make2 = (~x2, _children) => {
  let C2(s, x1) = x2;
  let theString = <div> s->ReasonReact.string </div>;
  {
    ...c2,
    render: _ =>
      switch (x1) {
      | None => theString
      | Some(x1) =>
        module M1 = {
          let make = make1;
        };
        <div> theString <M1 x1 /> </div>;
      },
  };
};

module M1 = {
  let make = make1;
};
module M2 = {
  let make = make2;
};

let example = <M1 x1={C1(2, Some(C2("hello", None)))} />;

[melbourne2991]

What would this look like with the new api?