"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", 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", _jsxs(_components.p, { children: ["React 构建界面的主要方式，", _jsx(_components.a, { href: "https://zh-hans.react.dev/learn/your-first-component", children: "官方文档" })] }), "\n"] }), "\n", _jsx(_components.h3, { id: "组件", children: "组件" }), "\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" }), ") {\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" }), ">"] }), "hello world", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ";\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "function Title() {}" }), ": 首字母大写的函数"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "return

hello world

" }), ": 返回 ReactNode"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "reactnode", children: "ReactNode" }), "\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: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Title" }), "(", _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: "h1" }), ">"] }), "hello world", _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" }), " [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"hello\"" }), ",\n ", _jsx(_components.span, { className: "hljs-number", children: "1" }), ",\n ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _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: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"1\"" }), ">"] }), "Hello, world!", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), ",\n ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Title" }), " />"] }) }), ",\n ];\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "string" }), "、", _jsx(_components.code, { children: "number" }), "、", _jsx(_components.code, { children: "boolean" }), "、", _jsx(_components.code, { children: "null" }), " 和 ", _jsx(_components.code, { children: "undefined" }), " 都是是 ", _jsx(_components.strong, { children: "ReactNode" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "

Hello, world!

" }), " 和 ", _jsx(_components.code, { children: "" }), " 也是 ", _jsx(_components.strong, { children: "ReactNode" }), "，它们被单独归类为 ReactElement"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ReactNode" }), " 可以是它们中的单独一个，也可以是它们组成的数组"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "reactelement", children: "ReactElement" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "能在 Javascript 中使用，形似 html 标签的结构被称为 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" }), ") {\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" }), ">"] }), "hello world", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "h1" }), ">"] })] }), ";\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: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"hello\"" }), ">"] }), "Hello, world!", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "h1" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Title" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "tell me telephone", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "{1234567890}", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "p" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] })] }), "\n );\n}\n"] }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["ReactElement 分两种小写标签 ", _jsx(_components.code, { children: "<h1>Hello, world!</h1>" }), " 叫 html 标签，大写标签 ", _jsx(_components.code, { children: "<Title />" }), " 叫组件调用"] }), "\n", _jsx(_components.li, { children: "html 标签特性和原生 html 标签几乎相同，组件调用除了能实现 html 标签特性外，还带有组件特性" }), "\n", _jsx(_components.li, { children: "ReactElement 可以嵌套 ReactNode，因此 ReactElement 是 ReactNode 组成的树状结构" }), "\n", _jsxs(_components.li, { children: ["ReactElement 可以嵌套任意表达式，除字符串和 ReactElement 外，其他需要用 ", _jsx(_components.code, { children: "{}" }), " 包裹"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "思考", children: "思考" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: "下面例子组件能否返回?" }), "\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 class_", children: "App" }), " {\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: "li" }), ">"] }), "hello1", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "li" }), ">"] })] }), "\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), ">"] }), "hello2", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "li" }), ">"] })] }), "\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), ">"] }), "hello3", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "li" }), ">"] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.p, { children: "不能，返回不是 ReactNode。" }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: "下面例子组件能否返回?" }), "\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 class_", children: "App" }), " {\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: "div" }), ">"] }), "{{name: \"Hypoxia\", age: 27}}", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] })] }), "\n}\n"] }) }), "\n", _jsx(_components.p, { children: "不能，ReactElement 只能嵌套 ReactNode，所以不是 ReactNode。" }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "boolean" }), "、", _jsx(_components.code, { children: "null" }), " 和 ", _jsx(_components.code, { children: "undefined" }), " 在 React 中会展示成什么"] }), "\n", _jsx(_components.p, { children: "会展示成空" }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: "标签中能否调用函数" }), "\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: "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: "div" }), ">"] }), "{(() => \"hello\")()}", _jsxs(_components.span, { className: "hljs-tag", children: ["</", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] })] }), ";\n}\n"] }) }), "\n", _jsx(_components.p, { children: "可以，ReactElement 可以嵌套表达式" }), "\n"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; </article></body></html>