ydoc

<html><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="apple-touch-icon" sizes="180x180" href="../ydoc/images/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="../ydoc/images/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="../ydoc/images/favicon-16x16.png"/><link rel="manifest" href="../ydoc/images/manifest.json"/><link rel="mask-icon" href="../ydoc/images/safari-pinned-tab.svg"" color="#5bbad5"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>JSX-文档</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="ymfe"/><meta name="keywords"/><meta name="description" content="ydoc description demo"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/><link rel="stylesheet" href="../custom.css"/></head><body><div class="g-doc"><div class="m-summary" id="js-menu"><div class="m-summary-content" id="js-menu-content"><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="index.html" class="href">快速开始</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">教程</div><ul class="m-summary-list indent"><li class="item"><a href="structure.html" class="href">目录结构</a></li><li class="item"><a href="nav.html" class="href">导航</a></li><li class="item"><div class="m-summary-block"><a href="pages-index.html" class="href">页面</a><ul class="m-summary-list indent"><li class="item"><a href="pages-index.html" class="href">首页</a></li><li class="item"><a href="pages-book.html" class="href">文档页</a></li><li class="item"><a href="pages-custom.html" class="href">自定义页面</a></li></ul></div></li><li class="item"><a href="config.html" class="href">配置文件</a></li><li class="item"><a href="markdown.html" class="href">Markdown</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">自定义</div><ul class="m-summary-list indent"><li class="item"><a href="theme.html" class="href">主题</a></li><li class="item"><a href="" class="href">JSX</a></li><li class="item"><div class="m-summary-block"><a href="plugins.html" class="href">扩展</a><ul class="m-summary-list indent"><li class="item"><a href="create.html" class="href">创建插件</a></li><li class="item"><a href="hooks.html" class="href">Hooks</a></li><li class="item"><a href="markdown-it.html" class="href">markdown扩展</a></li></ul></div></li></ul></div><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="release.html" class="href">版本历史</a></li></ul></div></div><div class="m-summary-switch" id="js-summary-switch"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="bottom"><g transform="translate(904.92214,-879.1482)"><path d="m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,-55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,-174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,-174.68583 0.6895,0 26.281,25.03215 56.8701,55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864-231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,-104.0616 -231.873,-231.248 z" fill="#fff"></path></g></svg><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="top"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="aaa" fill="#fff" fill-rule="nonzero"><path d="M231.2455,342.502 L0,111.25397 L55.6165,55.62697 C86.2056,25.03212 111.7971,-2.99999998e-05 112.4866,-2.99999998e-05 C113.176,-2.99999998e-05 192.3503,78.60859 288.4293,174.6858 L463.1185,349.3716 L637.8077,174.6858 C733.8867,78.60859 813.060896,-2.99999997e-05 813.750396,-2.99999997e-05 C814.439896,-2.99999997e-05 840.031396,25.03212 870.620496,55.62697 L926.236996,111.25397 L694.9915,342.502 C567.8065,469.6884 463.4636,573.75 463.1185,573.75 C462.7734,573.75 358.4305,469.6884 231.2455,342.502 Z" id="Shape" transform="translate(463.118498, 286.874985) scale(1, -1) translate(-463.118498, -286.874985) "></path></g></g></svg></div></div><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" src="../ydoc/images/dog@1x.png" srcSet="../ydoc/images/dog@2x.png 2x"/><h6 class="name">YDoc</h6></a></div><div><div class="m-search"> <div class="icon"></div> <input type="text" class="input js-input" placeholder="搜索文档内容" /> <div class="m-search-result js-search-result"></div> </div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item active"><a class="href" href="index.html">文档</a></li><li class="item "><a class="href" href="../plugin/index.html">插件</a></li><li class="item "><span class="href">规范</span><ul class="m-header-subtitle"><li class="item"><a href="../standard/style-guide.html" class="link">设计规范</a></li><li class="item"><a href="../standard/index.html" class="link">文档规范</a></li></ul></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content" id="js-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>JSX</h1> <p>React发明了JSX， 可以简单地理解它是一种在JS中编写与XML类似的语言。通过JSX来声明组件的属性，类型与结果，并且通过｀{}`插值，套嵌JS逻辑与子级的JSX。</p> <h3 id="jsx的特点：">JSX的特点：</h3> <ol> <li>类XML语法容易接受，结构清晰</li> <li>增强JS语义</li> <li>抽象程度高，屏蔽DOM操作，跨平台</li> <li>代码模块化</li> </ol> <p>我们从最简单的一个helloworld开始：</p> <pre><code class="language-jsx"><h1>Hello, world!<span class="xml"><span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span> </code></pre> <p>script标签里面的内容实际会被编译成</p> <pre><code class="language-javascript">React.createElement(<span class="hljs-string">'h1'</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">'Hello, world!'</span>); </code></pre> <p>又如</p> <pre><code class="language-jsx"><span class="hljs-keyword">var</span> root =( <span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"my-list"</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>First Text Content<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Second Text Content<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span></span> ); </code></pre> <p>会被编译成</p> <pre><code class="language-javascript"><span class="hljs-keyword">var</span> root = React.createElement(<span class="hljs-string">'ul'</span>, { <span class="hljs-attr">className</span>: <span class="hljs-string">'my-list'</span> }, React.createElement(<span class="hljs-string">'li'</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">'First Text Content'</span>), React.createElement(<span class="hljs-string">'li'</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">'Second Text Content'</span>) ); </code></pre> <h3 id="jsx语法介绍">JSX语法介绍</h3> <p>｀{}`插值是让JSX区别普通HTML的一个重要特性，只有三个地方可以使用它。可以放属性名的地方，属性等于号之后的位置及innerHTML之间。</p> <p>1.<strong>可以放属性名的地方</strong>, 这里只能使用<code>JSXSpreadAttribute</code>(延伸属性)， 换言之，括号内必须带三个点号</p> <pre><code class="language-jsx"><span class="hljs-keyword">var</span> props = {}; props.foo = x; props.bar = y; <span class="hljs-keyword">var</span> component = <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Component</span> {<span class="hljs-attr">...props</span>} /></span>; </span></code></pre> <p>2.<strong>属性等于号之后的位置</strong>, JSX的属性值必须用引号括起来，当你将引号改成花括号，它里面就可以使用JSX变量了。相当于其他框架的绑定属性或指令。需要说明一下，HTML的固有属性必须使用JS形式，保持驼峰风格，如class要用className代替，for要用htmlFor代替，tabindex要用tabIndex代替，colspan要用colSpan代替。</p> <pre><code class="language-jsx"><div tabIndex＝{<span class="hljs-keyword">this</span>.props.a} /> </code></pre> <p>花括号里面可以使用三元表达式</p> <pre><code class="language-jsx"><span class="hljs-keyword">var</span> person = <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Person</span> <span class="hljs-attr">name</span>=<span class="hljs-string">{</span> <span class="hljs-attr">window.isLoggedIn</span> ? <span class="hljs-attr">window.name</span> <span class="hljs-attr">:</span> '' } /></span>; </span></code></pre> <p>会编译成</p> <pre><code class="language-javascript"><span class="hljs-keyword">var</span> person = React.createElement( Person, {<span class="hljs-attr">name</span>: <span class="hljs-built_in">window</span>.isLoggedIn ? <span class="hljs-built_in">window</span>.name : <span class="hljs-string">''</span>} ); </code></pre> <p>3.<strong>innerHTML</strong></p> <pre><code class="language-jsx"><div>xxx{111}yyy</div> </code></pre> <p>这个会编译成, <code>相邻的字任串或数字会合并成一个字符串</code>，<code>布尔，null, undefined会被忽略掉</code>。</p> <pre><code class="language-javascript">React.createElement(<span class="hljs-string">'div'</span>, <span class="hljs-literal">null</span>, <span class="hljs-string">"xxx111yyy"</span>) </code></pre> <p>在innerHTML里面，我们可以使用数组或数组的map方法生成一个新数组的方法，为当前父元素添加一堆子元素。</p> <pre><code class="language-jsx"><span class="hljs-keyword">var</span> ul = ( <span class="xml"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"unstyled"</span>></span> { this.todoList.todos.map(function (todo) { return ( <span class="hljs-tag"><<span class="hljs-name">li</span>></span> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">{todo.done}</span>></span> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{</span>'<span class="hljs-attr">done-</span>' + <span class="hljs-attr">todo.done</span>}></span>{todo.text}<span class="hljs-tag"></<span class="hljs-name">span</span>></span> <span class="hljs-tag"></<span class="hljs-name">li</span>></span> ); }) } <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> ); </span></code></pre> <h3 id="jsx中使用样式">JSX中使用样式</h3> <p>在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，`属性值不能是字符串而必须为对象｀。</p> <pre><code class="language-jsx"><div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div> </code></pre> <p>或者</p> <pre><code class="language-jsx"><span class="hljs-keyword">var</span> style = { <span class="hljs-attr">color</span>: <span class="hljs-string">'#ff0000'</span>, <span class="hljs-attr">fontSize</span>: <span class="hljs-string">'14px'</span> }; <span class="hljs-keyword">var</span> node = <span class="xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{style}</span>></span>HelloWorld.<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>; </code></pre> <p>要明确记住,{}里面是JS代码,这里传进去的是标准的JS对象。在JSX中可以使用所有的样式，基本上属性名的转换规范就是将其写成驼峰写法，例如“background-color”变为“backgroundColor”, “font-size”变为“fontSize”，这和标准的JavaScript操作DOM样式的API是一致的。</p> <h3 id="html转义">HTML转义</h3> <p>在组件内部添加html代码,并将html代码渲染到页面上。React默认会进行HTML的转义，避免XSS攻击， 如果要不转义，可以使用dangerouslySetInnerHTML属性。dangerouslySetInnerHTML要求对应一个对象，里面有一个叫__html的字符串。React故意搞得这么难写，目的让大家少点用它。</p> <pre><code class="language-jsx"><div dangerouslySetInnerHTML={{<span class="hljs-attr">__html</span>: <span class="hljs-string">'<strong>content</strong>'</span>}}><span class="xml"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> </code></pre> <p>注意：JSX里面br，input, hr等标签必须自闭合，如<code><br></code>必须写成<code><br /></code> 并且使用了dangerouslySetInnerHTML</p> <h3 id="属性的定义">属性的定义</h3> <p>JSX是严格区分固有属性与自定义属性， 固有属性是指元素原形链上就已存在的属性，比如id, title, className, htmlFor, style，colSpan。这些属性是严格区分大小写。并且对属性值也有要求。</p> <p>固有属性根据其值的类型，可以分为布尔属性与字符串属性。布尔属性一般出现在表单元素与A，script等标签上，如disabled, readOnly, selected, checked等等。布尔属性时，大家在使用时，值必须是布尔</p> <pre><code class="language-jsx"><input type=<span class="hljs-string">'radio'</span> checked={<span class="hljs-literal">true</span>} /> </code></pre> <p>字符串属性也比较常见：</p> <pre><code>value,id,title,alt,htmlFor,longDesc,className </code></pre> <p>还有一些不规则的属性(不需要刻意记，只要记住上面两种就是)</p> <pre><code>accessKey,bgColor,cellPadding,cellSpacing,codeBase,codeType,colSpan,dateTime,defaultValue,contentEditable,frameBorder,maxLength,marginWidth,marginHeight,rowSpan,tabIndex,useMap,vSpace,valueType,vAlign </code></pre> <p>而自定义属性，则是用户随便设置的。</p> <h3 id="如何自定义组件">如何自定义组件</h3> <p>在 YDoc 新建组件是非常简单的，第一步在 docs 目录下新建 _components 目录 假设我们要新建一个 Demo 组件，可以新建 Demo.jsx 文件（确保文件名第一个字母大写），文件内容如下：</p> <p>一般来说，我们可以通过标签名的第一个字母是大写还是小写来识别组件与普通标签。</p> <pre><code class="language-jsx"> <p> Hello, <input type="text" placeholder="Your name here" />! It is {props.date} </p> </code></pre> <h3 id="如何引用自定义组件">如何引用自定义组件</h3> <p>假设有一个 Demo2 组件，想引用 Demo 组件，可在 Demo2.jsx 文件写入以下示例代码引入：</p> <pre><code class="language-jsx"><Demo2 date=<span class="hljs-string">"2018"</span>> </code></pre> <h3 id="自定义页面变量">自定义页面变量</h3> <p>如果使用 js 自定义页面变量，将会非常难用和不优雅，YDoc 参考了开源工具 <a href="https://github.com/jonschlinkert/gray-matter">gray-matter</a> 在页面注入 YAML 方案。</p> <pre><code class="language-html">--- title: Hello slug: home --- <span class="hljs-tag"><<span class="hljs-name">h1</span> ></span>{title}, {slug}<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> </code></pre> <h3 id="系统内部组件">系统内部组件</h3> <p>系统内置了如下的组件，请尽量避免跟系统组件重名，因为一旦重名，将会覆盖系统的原有组件。</p> <ul> <li>Content</li> <li>Footer</li> <li>Head</li> <li>Header</li> <li>Homepage</li> <li>Hook</li> <li>Layout</li> <li>Logo</li> <li>Script</li> <li>Summary</li> </ul> </div><div class="m-content-container m-paging"><div class="m-paging-prev m-paging-item"><a href="theme.html" class="href"><span class="ui-font-ydoc"></span>主题</a></div><div class="m-paging-next m-paging-item"><a href="plugins.html" class="href">扩展<span class="ui-font-ydoc"></span></a></div></div></div></div></div><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html>