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 とは、実行時にコンポーネント関数に渡されるオブジェクトのことで、JSX にバインドされたすべての属性を表します。props オブジェクトは読み取り専用で、Object ゲッターでラップされたリアクティブなプロパティを持っています。これにより、呼び出し元が Signal や Signal 式を使用しているかどうか、あるいは静的な値を使用しているかどうかに関わらず、一貫した形式を持つことができます。", jsx(_components.code, {
        children: "props.propName"
      }), " でアクセスします。"]
    }), "\n", jsxs(_components.p, {
      children: ["このため、追跡スコープ内で行なわないとリアクティビティが失われてしまうので、props オブジェクトを分割代入しないことも非常に重要です。一般的に、Solid のプリミティブや JSX の外側で props オブジェクトのプロパティにアクセスすると、リアクティビティが失われます。これは分割代入だけでなく、スプレッド演算子や ", jsx(_components.code, {
        children: "Object.assign"
      }), " のような関数にも当てはまります。"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid には、props を扱う際に役立つユーティリティがいくつかあります。1 つ目は ", jsx(_components.code, {
        children: "mergeProps"
      }), " で、潜在的にリアクティブなオブジェクトを、リアクティビティを失うことなく（非破壊的な ", jsx(_components.code, {
        children: "Object.assign"
      }), " のように）マージします。最も一般的なケースは、コンポーネントにデフォルトの props を設定するときです。"]
    }), "\n", jsxs(_components.p, {
      children: ["この例の ", jsx(_components.code, {
        children: "greetings.tsx"
      }), " では、テンプレート内にデフォルト値をインライン化しましたが、", jsx(_components.code, {
        children: "mergeProps"
      }), " を使えばデフォルトを設定している場合もリアクティブな更新を維持できます:"]
    }), "\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-37f939fb.js.map
