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: ["Props sind unsere Bezeichnung für das Objekt, das an unsere Komponenten-Funktionen bei der AUsführung übergeben wird, das alle Attribute darstellt, die an das JSX gebunden sind. Props-Objekte sind nur lesbar und haben reaktive Einträge, die in Objekt-Gettern stecken. Das erlaubt es uns, eine konsistente Form zu haben, unabhängig davon, ob der Aufrufer Signale, Signal-Ausdrücke oder einfache statische Werte verwendet. Man kann auf sie einfach mit ", jsx(_components.code, {
        children: "props.propName"
      }), " zugreifen."]
    }), "\n", jsxs(_components.p, {
      children: ["Aus diesem Grund ist es sehr wichtig, das Props-Objekt nicht einfach zu destrukturieren, weil man dadurch die Reaktivität verlieren würde, wenn es nicht innerhalb eines Verfolgungs-Scopes abläuft. Generell kann der Eigenschaftszugriff auf das Props-Objekt außerhalb von Solids Primitiven oder JSX zum Verlust der Reaktivität führen. Das gilt nicht nur für Destrukturierung, sondern auch zu Spread-Operatoren und Funktionen wie ", jsx(_components.code, {
        children: "Object.assign"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Solid hat ein paar Werkzeuge, um uns bei der Arbeit mit Props zu helfen. Das erste ist ", jsx(_components.code, {
        children: "mergeProps"
      }), ", was potentiell reaktive Objekte zusammenführt (wie ein nicht-zerstörerisches ", jsx(_components.code, {
        children: "Object.assign"
      }), "), ohne ihre Reaktivität zu verlieren. Der häufigste Nutzungsfall ist das Setzen von Standardeinstellungen für die Komponenten-Props."]
    }), "\n", jsxs(_components.p, {
      children: ["In diesem Beispiel haben wir in ", jsx(_components.code, {
        children: "greetings.tsx"
      }), " die Standardeinstellungen im Template, aber wir können auch ", jsx(_components.code, {
        children: "mergeProps"
      }), " verwenden, um die reaktiven Updates beizubehalten, selbst wenn wir Standardeinstellungen setzen:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " merged = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "mergeProps"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "greeting"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Hi\""
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"John\""
        }), " }, props);\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          }), "{merged.greeting} {merged.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          })]
        }), "\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-3ad3bd7a.js.map
