Can we do React-style iteration over children?

[danielkov]

Problem

In React, we can perform magic tricks with React.Children, e.g.: create a component that can take asChild prop that changes the component in that it "unwraps" the DOM tree and applies the props it would normally pass to a wrapper element to the first child instead, like so:

const Example = () => {
  return (
    <Trigger asChild>
      <button className="myButton">
        Click me
      </button>
    </Trigger>
  );
}

would produce the following DOM tree:

<button {...props from Trigger} class="myButton">
  Click me
</button>

by doing something like this in Trigger:

const Trigger = ({
  children,
  asChild,
}: {
  children: React.ReactNode;
  asChild?: boolean;
}) => {
  const [show, setShow] = React.useState(false);

  if (asChild) {
    return React.Children.only(
      React.cloneElement(children as React.ReactElement, {
        "data-hidden": !show,
        onClick: () => setShow(true),
      })
    );
  }

  return <button onClick={() => setShow(true)}>{children}</button>;
};

Question

Does Dioxus provide a similar API for utilities like React.Children and React.cloneElement? Would the following be possible?

fn Example(cx: Scope) -> Element {
    render! {
        Trigger {
            as_child: true,
            class: "myButton",
            button {
                "Click me!"
            }
        }
    }
}

Based on my digging around it seems like this could be possible, but I didn't want to dive too deep before I made sure there's not an official way of achieving something similar.

[ealmloff]

There has been some discussion about a VNode iterator in this issue, but would be more complicated than react because of the structure of VNodes that enables dioxus' improved performance.

You can spread props pretty easily in the git version of dioxus. I think the API you posted is possible, but it would be much easier to support an API like this:

fn Example(cx: Scope) -> Element {
    render! {
        button {
            class: "myButton",
            ..create_trigger(),
            "Click me!"
        }
    }
}