"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "ReactElement 间的传递数据的方式。" }), "\n"] }), "\n", _jsx(_components.h3, { id: "props", children: "Props" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "父 ReactElement 向子 ReactElement 的通信方式" }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Title" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children, color }" }), ") {\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: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), " }}>"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ";\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\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: "Title" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"#ccc\"" }), ">"] }), "Hello World", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ";\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "通过定义小驼峰命名的 JSX 属性可以向 ReactElement 传递数据" }), "\n", _jsx(_components.li, { children: "这些数据被称为 props，html 标签接收它作为 DOM 属性，而组件第一个参数可获取 props 作为数据使用" }), "\n", _jsxs(_components.li, { children: ["嵌套也是 props 传递的方式，html 标签将它作为内容，组件可以通过 ", _jsx(_components.code, { children: "props.children" }), " 获取它"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "context", children: "Context" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "组件向子代组件传递数据的方式" }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createContext, useContext } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), ";\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Context" }), " = ", _jsx(_components.span, { className: "hljs-title function_", children: "createContext" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"dark\"" }), ");\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "InfoList" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ infoList }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " color = ", _jsx(_components.span, { className: "hljs-title function_", children: "useContext" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "Context" }), ");\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ul" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), " }}>"] }), "\n {infoList?.map(({ key, text }) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), " }} ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{key}" }), ">"] }), "\n {text}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Info" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " color = ", _jsx(_components.span, { className: "hljs-title function_", children: "useContext" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "Context" }), ");\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "style" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "color" }), " }}>"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "InfoList" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "App" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Context.Provider" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"dark\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Info" }), ">"] }), "信息", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n );\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["通过 ", _jsx(_components.code, { children: "createContext" }), " 创建上下文对象 ", _jsx(_components.strong, { children: "Context" }), "，组件通过 ", _jsx(_components.strong, { children: "Provider 组件" }), "包裹子代组件，赋值 value 向子代组件传递数据"] }), "\n", _jsxs(_components.li, { children: ["子代组件通过向 ", _jsx(_components.code, { children: "useContext" }), " 传参 ", _jsx(_components.strong, { children: "Context" }), " 可获取祖先组件传递的数据"] }), "\n", _jsxs(_components.li, { children: ["要注意的是，子代组件获取的数据是离其最近的上层 ", _jsx(_components.strong, { children: "Provider 组件" }), "传递的值"] }), "\n", _jsxs(_components.li, { children: ["假如离子代最近的上层 ", _jsx(_components.strong, { children: "Provider 组件" }), "没传递数据，则会使用 ", _jsx(_components.code, { children: "createContext()" }), " 提供的 value 默认值"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "思考", children: "思考" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };