https://www.solidjs.com/assets/lesson-f5231fbd-Dac4DyCU.js

1import{d as n,$ as t,v as r}from"./jsx-runtime--u0cTjhj.js";import"./index-ZkWeeHR8.js";const c=[];function i(o){const e=Object.assign({p:"p",code:"code",pre:"pre",span:"span"},o.components);return t(r,{children:[t(e.p,{children:["On many occassions, you might want to expose a ref from inside a component to a parent. The way we do this is still by using the ",n(e.code,{children:"ref"})," attribute. From the outside, using ",n(e.code,{children:"ref"})," on a component works very similar to using ",n(e.code,{children:"ref"})," on a native element. You can pass it a variable to be assigned or a callback function."]}),`
2`,t(e.p,{children:["However, it is the component author's responsibility to connect that ",n(e.code,{children:"ref"})," to an internal element to forward it back up. To do so, we leverage ",n(e.code,{children:"props.ref"}),". This is a callback form of ",n(e.code,{children:"ref"})," if either type of ",n(e.code,{children:"ref"})," is given, but this detail is mostly hidden from you as you will more than likely just be assigning it directly to the ",n(e.code,{children:"ref"})," attribute of one of the elements or components in this component's JSX."]}),`
3`,t(e.p,{children:["To get the logo animating again, we need to forward the ref from ",n(e.code,{children:"canvas.jsx"}),":"]}),`
4`,n(e.pre,{children:t(e.code,{className:"hljs language-jsx",children:["<canvas ref={props.",n(e.span,{className:"hljs-property",children:"ref"}),"} width=",n(e.span,{className:"hljs-string",children:'"256"'})," height=",n(e.span,{className:"hljs-string",children:'"256"'}),` />
5`]})})]})}function l(o={}){const{wrapper:e}=o.components||{};return e?n(e,Object.assign({},o,{children:n(i,o)})):i(o)}export{l as default,c as toc};