SolidJS•3w ago

reference child component as ref?

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

Is there some way I can have this not wrap the child in a button, but instead let the child be its own button and reference that?

1 Reply

tizuOP•3w ago

never mind - this works.

<Menu trigger={(p) => (
  <button class="btn icon" {...p}>
    <UserIcon class="size-6" />
  </button>
)}>

<Menu trigger={(p) => (
  <button class="btn icon" {...p}>
    <UserIcon class="size-6" />
  </button>
)}>

const Menu = (p: {
  trigger?: (p: { ref: () => void; onClick: () => void }) => JSX.Element;
  // ...
}) => {

const Menu = (p: {
  trigger?: (p: { ref: () => void; onClick: () => void }) => JSX.Element;
  // ...
}) => {

<>
  {p.trigger?.({ ref: setReference, onClick: () => setOpen(!open()) })}
</>

<>
  {p.trigger?.({ ref: setReference, onClick: () => setOpen(!open()) })}
</>