buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-20 06:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: Update react.md. 593662f3c6

Browse Source
This commit is contained in:
jaywcjlove
2022-10-08 16:57:20 +00:00
parent 6a583af54c
commit 19aeff642e
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/react.html
View File

@ -41,9 +41,9 @@
<p>React 是一个用于构建用户界面的 JavaScript 库。</p>
<ul>
<li><a href="https://reactjs.org/">React 官方文档</a> <em>(reactjs.org)</em></li>
<li><a href="./styled-components.html">Styled Components 备忘清单</a> <em>(jaywcjlove.github.io)</em></li>
</ul>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>createRoot<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/client'</span>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>createRoot<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom/client'</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">App</span></span> <span class="token keyword module">from</span> <span class="token string">'./App'</span>
</span></code></pre>
<hr>
@ -62,11 +62,12 @@
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">class</span> <span class="token class-name">Hello</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token spread operator">...</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">World</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span><span class="code-line"> <span class="token comment">/* ... */</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>使用 <code>export</code> 或者 <code>export default</code> 导出 <code>Hello</code> 组件</p>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Hello</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./hello.js'</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Example</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Hello</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<p>使用 <code>export</code> 导出 <strong><code>Hello</code></strong>，<code>export default</code> 导出 <strong><code>World</code></strong> 组件</p>
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">World</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Hello</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./hello.js'</span><span class="token punctuation">;</span>
</span></code></pre>
<p>使用 <code>import</code> 导入 <code>Hello</code> 组件，在示例中使用。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="react-组件中的-css"><a aria-hidden="true" tabindex="-1" href="#react-组件中的-css"><span class="icon icon-link"></span></a>React 组件中的 CSS</h3><div class="wrap-body">