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: [jsx(_components.code, {
        children: "Пропсы"
      }), " - это объект, который передается нашей компонентной функции при вызове, представляющий все атрибуты, связанные с его JSX. Объекты ", jsx(_components.code, {
        children: "пропсов"
      }), " доступны только для чтения и имеют реактивные свойства — заключенные в Объект геттеры. Это позволяет им иметь согласованную форму независимо от того, использовались ли при вызове ", jsx(_components.code, {
        children: "Сигналы"
      }), " или выражения-cигналы (", jsx(_components.code, {
        children: "signal expressions"
      }), "), простые или статические значения. Вы получаете к ним доступ просто через ", jsx(_components.code, {
        children: "props.propName"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["По этой причине также очень важно не деструктурировать ", jsx(_components.code, {
        children: "пропсы"
      }), " из объектов, поскольку это приведет к потере реактивности, если это не будет сделано в пределах области отслеживаемого скоупа (", jsx(_components.code, {
        children: "tracking scope"
      }), "). В общем случае обращение к свойствам объекта ", jsx(_components.code, {
        children: "props"
      }), " вне примитивов Solid или JSX может привести к потере реактивности. Это применимо не только к деструктуризации, но также и к спредам (", jsx(_components.code, {
        children: "spread"
      }), ") и таким функциям как ", jsx(_components.code, {
        children: "Object.assign"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["У Solid есть несколько утилит, которые помогут нам при работе с ", jsx(_components.code, {
        children: "пропсами"
      }), ". Первый - это ", jsx(_components.code, {
        children: "mergeProps"
      }), ", который объединяет потенциально реактивные объекты вместе (например, неразрушающий ", jsx(_components.code, {
        children: "Object.assign"
      }), ") без потери реактивности. Самый распространенный случай - это установка ", jsx(_components.code, {
        children: "пропсов"
      }), " по умолчанию для наших компонентов."]
    }), "\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"
        }), " (\n\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          }), "\n\t\t{merged.greeting} {merged.name}\n\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          })]
        }), "\n);\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-aec666ea.js.map
