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",
    ol: "ol",
    li: "li",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: ["你会在后面的示例中看到，JSX 是一种类 HTML 语法，并且它是 Solid 创建声明式视图的核心。JSX 以 ", jsx(_components.code, {
        children: "{ }"
      }), " 的形式为属性和插入添加了动态表达式。这些 JSX 块最终只是编译成 JavaScript 代码和 HTML 模板元素的组合，HTML 模板元素在代码执行时被克隆。这就可以从大小和性能方面最优化地创建代码。"]
    }), "\n", jsx(_components.p, {
      children: "与其他一些使用 JSX 的框架不同，Solid 尝试尽可能对齐 HTML 标准，甚至允许简单的复制粘贴 Stack Overflow 上的答案或者设计师使用模板构建器生成的代码。"
    }), "\n", jsx(_components.p, {
      children: "JSX 和 HTML 之间有 3 个主要区别，这也是 JSX 不能被视为 HTML 的超集的原因。"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX 没有 void 元素。这意味着所有元素都必须有一个结束标签或自关闭。在复制 ", jsx(_components.code, {
            children: "<input>"
          }), " 或 ", jsx(_components.code, {
            children: "<br>"
          }), " 之类的内容时，请注意这一点。"]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "JSX 必须返回单个 Element。要表示多个顶级元素，请使用 Fragment 元素。"
        }), "\n"]
      }), "\n"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<>\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          }), "Title", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h1"
            }), ">"]
          })]
        }), "\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "p"
            }), ">"]
          }), "Some Text", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "p"
            }), ">"]
          })]
        }), "\n</>\n"]
      })
    }), "\n", jsxs(_components.ol, {
      start: "3",
      children: ["\n", jsx(_components.li, {
        children: "JSX 不支持 HTML 注释或特殊标签，如 DocType。"
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "但是 JSX 确实支持 SVG。让我们尝试将一些 SVG 直接复制到我们的组件中。"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<svg height=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"300\""
        }), " width=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"400\""
        }), ">\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "id"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"gr1\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"0%\""
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"5%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,255,3);stop-opacity:1\""
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100%\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"stop-color:rgb(255,0,0);stop-opacity:1\""
            }), " />"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          })]
        }), "\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ellipse"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"125\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cy"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"150\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"100\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ry"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"60\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fill"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"url(#gr1)\""
            }), " />"]
          })
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Sorry"
        }), " but ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "this"
        }), " browser does not support inline ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "SVG"
        }), ".\n</svg>\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-9516f17a.js.map
