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 对象是只读的，并且含有封装为对象 getter 的响应式属性。它们具有一致的形式，无论调用者是使用 Signal、Signal 表达式还是简单值或静态值。 你只需通过 ", jsx(_components.code, {
        children: "props.propName"
      }), " 访问它们。"]
    }), "\n", jsxs(_components.p, {
      children: ["正因如此，请时刻记住不能直接解构它们，这会导致被解构的值脱离追踪范围从而失去响应性。通常，在 Solid 的 primitive 或 JSX 之外访问 props 对象上的属性可能会失去响应性。除了解构，像是扩展运算以及 ", jsx(_components.code, {
        children: "Object.assign"
      }), " 这样的函数也会导致失去响应性。"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid 有一些工具函数可以帮助我们处理 props。 第一个 ", jsx(_components.code, {
        children: "mergeProps"
      }), " 函数听起来很像它名字描述得那样合并 props。", jsx(_components.code, {
        children: "mergeProps"
      }), " 将潜在的响应式对象合并而不会失去响应式性。最常见的情况就是是为组件设置默认 props。"]
    }), "\n", jsxs(_components.p, {
      children: ["在示例中，在 ", jsx(_components.code, {
        children: "greetings.tsx"
      }), " 中，我们内联了模板中的默认值，但我们也可以使用 ", jsx(_components.code, {
        children: "mergeProps"
      }), " 设置默认值与此同时保持响 props 响应式更新。"]
    }), "\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-b80ab795.js.map
