import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["Oftmals möchte man eine Referenz von innerhalb einer Komponente deren Eltern-Komponente verfügbar machen. Der Weg, dies zu tun, ist immer noch das ", jsx(_components.code, {
        children: "ref"
      }), "-Attribut. Von außerhalb ", jsx(_components.code, {
        children: "ref"
      }), " einer Komponente zu nutzen funktioniert sehr ähnlich wie ", jsx(_components.code, {
        children: "ref"
      }), " auf einem nativen Element zu verwenden. Man kann entweder eine Variable zur Zuweisung oder eine Setter-Funktion übergeben."]
    }), "\n", jsxs(_components.p, {
      children: ["Allerdings ist es die Verantwortung des Authors, diese ", jsx(_components.code, {
        children: "ref"
      }), " zu einem internen Element zu verbinden, um diese aufwärts weiterzuleiten. Um dies zu tun, verwenden wir ", jsx(_components.code, {
        children: "props.ref"
      }), ". Dies ist eine callback-Form von ", jsx(_components.code, {
        children: "ref"
      }), ", unabhängig davon, welcher Typ von ", jsx(_components.code, {
        children: "ref"
      }), " übergeben wird, obwohl dieses Detail weitgehend versteckt bleiben wird, da es vermutlich ohnehin an das ", jsx(_components.code, {
        children: "ref"
      }), "-Attribut eines der internen Elemente oder Komponenten innerhalb des JSX übergeben wird."]
    }), "\n", jsxs(_components.p, {
      children: ["Um das Logo wieder animieren zu können, müssen wir die die ref von ", jsx(_components.code, {
        children: "canvas.tsx"
      }), " weiterleiten:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<canvas ref={props.", jsx(_components.span, {
          className: "hljs-property",
          children: "ref"
        }), "} width=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"256\""
        }), " height=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"256\""
        }), " />\n"]
      })
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-a54fd8f9.js.map
