mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
feat: add react.md cheatsheet. 0f5128ebd9
This commit is contained in:
jaywcjlove
@ -118,11 +118,11 @@
|
|||||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="dir-的权限分析"><a aria-hidden="true" tabindex="-1" href="#dir-的权限分析"><span class="icon icon-link"></span></a><code>dir</code> 的权限分析</h4><div class="wrap-body">
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="dir-的权限分析"><a aria-hidden="true" tabindex="-1" href="#dir-的权限分析"><span class="icon icon-link"></span></a><code>dir</code> 的权限分析</h4><div class="wrap-body">
|
||||||
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line line-number" line="1">d rwx r-x r-x
|
<pre class="language-text"><code class="language-text code-highlight"><span class="code-line line-number" line="1">d rwx r-x r-x
|
||||||
</span><span class="code-line line-number" line="2">┬ ─┬─ ─┬─ ─┬─
|
</span><span class="code-line line-number" line="2">┬ ─┬─ ─┬─ ─┬─
|
||||||
</span><span class="code-line line-number" line="3">│ │ │ │
|
</span><span class="code-line line-number" line="3">┆ ┆ ┆ ┆
|
||||||
</span><span class="code-line line-number" line="4">│ │ │ └─ 4. Other｜5 (4+0+1)
|
</span><span class="code-line line-number" line="4">┆ ┆ ┆ ╰─ 4. Other｜5 (4+0+1)
|
||||||
</span><span class="code-line line-number" line="5">│ │ └────── 3. Group｜5 (4+0+1)
|
</span><span class="code-line line-number" line="5">┆ ┆ ╰────── 3. Group｜5 (4+0+1)
|
||||||
</span><span class="code-line line-number" line="6">│ └─────────── 2. User ｜7 (4+2+1)
|
</span><span class="code-line line-number" line="6">┆ ╰─────────── 2. User ｜7 (4+2+1)
|
||||||
</span><span class="code-line line-number" line="7">└─────────────── 1. File Type | directory
|
</span><span class="code-line line-number" line="7">╰─────────────── 1. File Type | directory
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="权限模式"><a aria-hidden="true" tabindex="-1" href="#权限模式"><span class="icon icon-link"></span></a>权限模式</h3><div class="wrap-body">
|
</div></div></div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="权限模式"><a aria-hidden="true" tabindex="-1" href="#权限模式"><span class="icon icon-link"></span></a>权限模式</h3><div class="wrap-body">
|
||||||
<!--rehype:wrap-class=col-span-2-->
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
|
|||||||
@ -444,7 +444,27 @@
|
|||||||
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||||||
</span></code></pre>
|
</span></code></pre>
|
||||||
<p>在 <code>Title 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
|
<p>在 <code>Title 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
|
||||||
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body">
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body">
|
||||||
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
|
||||||
|
</span><span class="code-line line-number" line="2">┆ H3 Title <span class="token number">1</span> ┆
|
||||||
|
</span><span class="code-line line-number" line="3">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
|
||||||
|
</span><span class="code-line line-number" line="4">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
|
||||||
|
</span><span class="code-line line-number" line="5">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
|
||||||
|
</span><span class="code-line line-number" line="6">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
|
||||||
|
</span></code></pre>
|
||||||
|
<p>上面布局效果 Markdown 源码：</p>
|
||||||
|
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line line-number" line="1"><span class="token title important">H2 部分
|
||||||
|
</span></span><span class="code-line line-number" line="2"><span class="token title important"><span class="token punctuation">----</span></span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token comment"><!--rehype:body-class=cols-4--></span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token comment"><!--rehype:wrap-class=col-span-4--></span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
|
||||||
|
</span><span class="code-line line-number" line="8"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>在 <code>H2 部分</code> 标题添加 <code>cols-4</code>，和 <code>Title 1</code> 添加 <code>col-span-4</code> 合并栏</p>
|
||||||
|
</div></div></div><div class="wrap col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-9"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-9"><span class="icon icon-link"></span></a>卡片列合并布局 9</h3><div class="wrap-body">
|
||||||
<!--rehype:wrap-class=col-span-2-->
|
<!--rehype:wrap-class=col-span-2-->
|
||||||
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
|
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line line-number" line="1">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
|
||||||
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆
|
</span><span class="code-line line-number" line="2">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆
|
||||||
|
|||||||
641
docs/react.html
Normal file
641
docs/react.html
Normal file
@ -0,0 +1,641 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-color-mode="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>React 备忘清单
|
||||||
|
& react cheatsheet & Quick Reference</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta description="适合初学者的综合 React 备忘清单。为开发人员分享快速参考备忘单。">
|
||||||
|
<meta keywords="Quick,Reference,cheatsheet,react">
|
||||||
|
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||||||
|
<link rel="stylesheet" href="../style/style.css">
|
||||||
|
</head>
|
||||||
|
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||||
|
<path opacity=".4" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="currentColor"></path>
|
||||||
|
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
|
||||||
|
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/react.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||||||
|
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||||||
|
</svg>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||||||
|
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||||||
|
</svg>
|
||||||
|
</button><script>
|
||||||
|
const LOCAL_NANE = '_dark_mode_theme_'
|
||||||
|
const rememberedValue = localStorage.getItem(LOCAL_NANE);
|
||||||
|
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
|
||||||
|
document.documentElement.setAttribute('data-color-mode', rememberedValue);
|
||||||
|
}
|
||||||
|
const button = document.querySelector('#darkMode');
|
||||||
|
button.onclick = () => {
|
||||||
|
const theme = document.documentElement.dataset.colorMode;
|
||||||
|
const mode = theme === 'light' ? 'dark' : 'light';
|
||||||
|
document.documentElement.setAttribute('data-color-mode', mode);
|
||||||
|
localStorage.setItem(LOCAL_NANE, mode);
|
||||||
|
}
|
||||||
|
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="react-备忘清单"><a aria-hidden="true" tabindex="-1" href="#react-备忘清单"><span class="icon icon-link"></span></a>React 备忘清单</h1><div class="wrap-body">
|
||||||
|
<p>适合初学者的综合 React 备忘清单。</p>
|
||||||
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="介绍"><a aria-hidden="true" tabindex="-1" href="#介绍"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||||||
|
<p>React 是一个用于构建用户界面的 JavaScript 库。</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://reactjs.org/">React 官方文档</a> <em>(reactjs.org)</em></li>
|
||||||
|
</ul>
|
||||||
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><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 line-number" line="2"><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 line-number" line="3"><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>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token function">createRoot</span><span class="token punctuation">(</span>elm<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">root<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">App</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="导入多个导出"><a aria-hidden="true" tabindex="-1" href="#导入多个导出"><span class="icon icon-link"></span></a>导入多个导出</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token maybe-class-name">Component</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">ReactDOM</span></span> <span class="token keyword module">from</span> <span class="token string">'react-dom'</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 line-number" line="2"> <span class="token spread operator">...</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><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 line-number" line="1"><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 line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><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"><</span><span class="token class-name">Hello</span></span> <span class="token punctuation">/></span></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">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token string">"./Student.css"</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：类属性 <code>className</code></p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> divStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Student</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Julie<span class="token punctuation">"</span></span> <span class="token attr-name">age</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">23</span><span class="token punctuation">}</span></span>
|
||||||
|
</span></span><span class="code-line line-number" line="2"><span class="token tag"> <span class="token attr-name">pro</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>函数组件 <code>Student</code> 中访问属性</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>Class 组件 <code>Student</code> 中访问属性</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code>class</code> 组件使用 <code>this.props</code> 访问传递给组件的属性。</p>
|
||||||
|
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="children"><a aria-hidden="true" tabindex="-1" href="#children"><span class="icon icon-link"></span></a>Children</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">AlertBox</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="4"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">您有待处理的通知</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">AlertBox</span></span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>函数 <code>AlertBox</code> 组件</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">AlertBox</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="4"><span class="token plain-text"> </span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>Class <code>AlertBox</code> 组件，与函数组件 <code>AlertBox</code> 组件相同</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">AlertBox</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token function">render</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code>children</code> 作为子组件的的属性传递。</p>
|
||||||
|
</div></div></div><div class="wrap row-span-3"><div class="wrap-header h3wrap"><h3 id="state"><a aria-hidden="true" tabindex="-1" href="#state"><span class="icon icon-link"></span></a>State</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-3-->
|
||||||
|
<p>函数中的 State，Hook 是 React 16.8 的新增特性</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token comment">// 声明一个叫 "count" 的 state 变量</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword">const</span> <span class="token function-variable function">click</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setCount</span><span class="token punctuation">(</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7">
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了 </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> 次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="11"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>click<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="12"><span class="token plain-text"> 点击我
|
||||||
|
</span></span><span class="code-line line-number" line="13"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="14"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="15"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>使用 <code>setState</code> 更新状态，下面是函数组件读取状态</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了 </span><span class="token punctuation">{</span>count<span class="token punctuation">}</span><span class="token plain-text"> 次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="class-中的-state"><a aria-hidden="true" tabindex="-1" href="#class-中的-state"><span class="icon icon-link"></span></a>Class 中的 State</h4><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">Student</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">count</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="10"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">count</span><span class="token operator">:</span> count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="12"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="13"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="14"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="15"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">click</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="16"><span class="token plain-text"> 点击我
|
||||||
|
</span></span><span class="code-line line-number" line="17"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="18"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">}</span><span class="token plain-text">次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="19"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="20"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="21"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="22"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>使用 <code>setState</code> 更新状态，<code>class</code> 组件中不能使用 <yel><del>hooks</del></yel>。下面是 <code>class</code> 组件读取状态</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">您点击了</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">count</span><span class="token punctuation">}</span><span class="token plain-text">次</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="循环"><a aria-hidden="true" tabindex="-1" href="#循环"><span class="icon icon-link"></span></a>循环</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> elm <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'one'</span><span class="token punctuation">,</span> <span class="token string">'two'</span><span class="token punctuation">,</span> <span class="token string">'three'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token punctuation">{</span>elm<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>value<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code>key</code> 值在兄弟节点之间必须唯一</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="事件监听"><a aria-hidden="true" tabindex="-1" href="#事件监听"><span class="icon icon-link"></span></a>事件监听</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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">Hello</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Hello World"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="6">
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> Say Hi
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数注入"><a aria-hidden="true" tabindex="-1" href="#函数注入"><span class="icon icon-link"></span></a>函数注入</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token parameter">x1<span class="token punctuation">,</span> x2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> x1 <span class="token operator">+</span> x2<span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token function">addNumbers</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌套"><a aria-hidden="true" tabindex="-1" href="#嵌套"><span class="icon icon-link"></span></a>嵌套</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>count<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="11"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="12"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="fragment"><a aria-hidden="true" tabindex="-1" href="#fragment"><span class="icon icon-link"></span></a>Fragment</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Fragment</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Avatar</span></span> <span class="token keyword module">from</span> <span class="token string">'./Avatar'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">Profile</span></span> <span class="token keyword module">from</span> <span class="token string">'./Profile'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Student</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Avatar</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./demo.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Profile</span></span> <span class="token attr-name">username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>从 @v16.2.0 开始，<code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="portals"><a aria-hidden="true" tabindex="-1" href="#portals"><span class="icon icon-link"></span></a>Portals</h3><div class="wrap-body">
|
||||||
|
<p>React 并<em>没有</em>创建一个新的 <code>div</code>。它只是把子元素渲染到 <code>domNode</code> 中。<code>domNode</code> 是一个可以在任何位置的有效 DOM 节点。</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createPortal</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> domNode
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案</p>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="默认值"><a aria-hidden="true" tabindex="-1" href="#默认值"><span class="icon icon-link"></span></a>默认值</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-props"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-props"><span class="icon icon-link"></span></a>Class 组件默认 props</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">CustomButton</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token comment">// ...</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token maybe-class-name">CustomButton</span><span class="token punctuation">.</span><span class="token property-access">defaultProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="使用"><a aria-hidden="true" tabindex="-1" href="#使用"><span class="icon icon-link"></span></a>使用</h4><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CustomButton</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>不传值 <code>props.color</code> 将自动设置为 <code>blue</code></p>
|
||||||
|
</div></div></div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件默认-state"><a aria-hidden="true" tabindex="-1" href="#class-组件默认-state"><span class="icon icon-link"></span></a>Class 组件默认 state</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 line-number" line="2"> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>在构造 <code>constructor()</code>中设置默认状态。</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 line-number" line="2"> state <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件默认-props"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-props"><span class="icon icon-link"></span></a>函数组件默认 props</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomButton</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> <span class="token punctuation">{</span> color <span class="token operator">=</span> <span class="token string">'blue'</span> <span class="token punctuation">}</span> <span class="token operator">=</span> props<span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件默认-state"><a aria-hidden="true" tabindex="-1" href="#函数组件默认-state"><span class="icon icon-link"></span></a>函数组件默认 state</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">CustomButton</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> <span class="token punctuation">[</span>color<span class="token punctuation">,</span> setColor<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">'blue'</span><span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>color<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="jsx"><a aria-hidden="true" tabindex="-1" href="#jsx"><span class="icon icon-link"></span></a>JSX</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="介绍-1"><a aria-hidden="true" tabindex="-1" href="#介绍-1"><span class="icon icon-link"></span></a>介绍</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<p><code>JSX</code> 仅仅只是 <code>React.createElement(component, props, ...children)</code> 函数的语法糖</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyButton</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">shadowSize</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="2"><span class="token plain-text"> 点击我
|
||||||
|
</span></span><span class="code-line line-number" line="3"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">MyButton</span></span><span class="token punctuation">></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>会编译为</p>
|
||||||
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token maybe-class-name">MyButton</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span><span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token literal-property property">shadowSize</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token string">'点击我'</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>没有子节点</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>会编译为</p>
|
||||||
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token string">'div'</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token punctuation">{</span><span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'sidebar'</span><span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-点语法"><a aria-hidden="true" tabindex="-1" href="#jsx-点语法"><span class="icon icon-link"></span></a>JSX 点语法</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Menu</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="3"><span class="token plain-text">);
|
||||||
|
</span></span><span class="code-line line-number" line="4"><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text">Menu.Item = ({ children }) => (
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>children<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text">);
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="11"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="12"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-element"><a aria-hidden="true" tabindex="-1" href="#jsx-element"><span class="icon icon-link"></span></a>JSX Element</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> emptyHeading <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> root <span class="token operator">=</span> <span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">createRoot</span><span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token dom variable">document</span><span class="token punctuation">.</span><span class="token method function property-access">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, world</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="8">root<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>参考：<a href="https://reactjs.org/docs/rendering-elements.html">渲染元素</a></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-属性"><a aria-hidden="true" tabindex="-1" href="#jsx-属性"><span class="icon icon-link"></span></a>JSX 属性</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>user<span class="token punctuation">.</span><span class="token property-access">avatarUrl</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text"> 点击我
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：类属性 <code>className</code></p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-表达式"><a aria-hidden="true" tabindex="-1" href="#jsx-表达式"><span class="icon icon-link"></span></a>JSX 表达式</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> name <span class="token operator">=</span> <span class="token string">'Josh Perez'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Hello, </span><span class="token punctuation">{</span>name<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token keyword">function</span> <span class="token function">fullName</span><span class="token punctuation">(</span><span class="token parameter">firstName<span class="token punctuation">,</span> lastName</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token keyword control-flow">return</span> firstName <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> lastName<span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token keyword">let</span> element <span class="token operator">=</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> Hello, </span><span class="token punctuation">{</span><span class="token function">fullName</span><span class="token punctuation">(</span><span class="token string">'Julie'</span><span class="token punctuation">,</span> <span class="token string">'Johnson'</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="11"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-style"><a aria-hidden="true" tabindex="-1" href="#jsx-style"><span class="icon icon-link"></span></a>JSX style</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> divStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">backgroundImage</span><span class="token operator">:</span> <span class="token string">'url('</span> <span class="token operator">+</span> imgUrl <span class="token operator">+</span> <span class="token string">')'</span><span class="token punctuation">,</span>
|
||||||
|
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MyComponent</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>divStyle<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">组件</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-dangerouslysetinnerhtml"><a aria-hidden="true" tabindex="-1" href="#jsx-dangerouslysetinnerhtml"><span class="icon icon-link"></span></a>JSX dangerouslySetInnerHTML</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> markup <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">__html</span><span class="token operator">:</span> <span class="token string">'我 &middot; 你'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>markup<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code>dangerouslySetInnerHTML</code> 是 React 为浏览器 DOM 提供 <code>innerHTML</code> 的替换方案。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-htmlfor"><a aria-hidden="true" tabindex="-1" href="#jsx-htmlfor"><span class="icon icon-link"></span></a>JSX htmlFor</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">MyComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="3"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ab<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>v<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="4"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ab<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">HTML</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text">);
|
||||||
|
</span></span></code></pre>
|
||||||
|
<p><code>for</code> 在 <code>JS</code> 中是保留字，JSX 元素使用了 <code>htmlFor</code> 代替</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-defaultvalue"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultvalue"><span class="icon icon-link"></span></a>JSX defaultValue</h3><div class="wrap-body">
|
||||||
|
<p>非受控组件的属性，设置组件第一次挂载时的 <code>value</code></p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hello<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p><code><input></code>、<code><select></code> 和 <code><textarea></code> 支持 value 属性</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-defaultchecked"><a aria-hidden="true" tabindex="-1" href="#jsx-defaultchecked"><span class="icon icon-link"></span></a>JSX defaultChecked</h3><div class="wrap-body">
|
||||||
|
<p>非受控组件的属性，设置组件是否被选中</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">defaultChecked</span> <span class="token punctuation">/></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>类型为 <code>checkbox</code> 或 <code>radio</code> 时，组件支持 checked 属性</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-classname"><a aria-hidden="true" tabindex="-1" href="#jsx-classname"><span class="icon icon-link"></span></a>JSX className</h3><div class="wrap-body">
|
||||||
|
<p>属性用于指定 <code>CSS</code> 的 <code>class</code></p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">...</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>React 中使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components">Web Components</a> 使用 <code>class</code> 属性代替</p>
|
||||||
|
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="jsx-条件渲染"><a aria-hidden="true" tabindex="-1" href="#jsx-条件渲染"><span class="icon icon-link"></span></a>JSX 条件渲染</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">formatName</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">return</span> user<span class="token punctuation">.</span><span class="token property-access">firstName</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token operator">+</span> <span class="token string">' '</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token operator">+</span> user<span class="token punctuation">.</span><span class="token property-access">lastName</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="8">
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token keyword module">export</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="10"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="12"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">你好, </span><span class="token punctuation">{</span><span class="token function">formatName</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="13"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="14"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="15"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="16"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">你好, 先生。</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="17"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：组件必须总是返回一些东西。</p>
|
||||||
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="使用-1"><a aria-hidden="true" tabindex="-1" href="#使用-1"><span class="icon icon-link"></span></a>使用</h4><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Greeting</span></span> <span class="token attr-name">firstName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>三<span class="token punctuation">"</span></span> <span class="token attr-name">lastName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>张<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-三目运算符--与运算符-"><a aria-hidden="true" tabindex="-1" href="#jsx-三目运算符--与运算符-"><span class="icon icon-link"></span></a>JSX 三目运算符 / 与运算符 &&</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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">Weather</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>isLoggedIn <span class="token operator">?</span> <span class="token string">'已'</span> <span class="token operator">:</span> <span class="token string">'未'</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token plain-text">登录。
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<hr>
|
||||||
|
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>isShow <span class="token operator">&&</span> <span class="token operator"><</span>div<span class="token operator">></span>内容<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-组件"><a aria-hidden="true" tabindex="-1" href="#jsx-组件"><span class="icon icon-link"></span></a>JSX 组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Dropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="2"><span class="token plain-text"> 下拉列表
|
||||||
|
</span></span><span class="code-line line-number" line="3"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="4"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单一</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单二</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">菜单三</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu.Item</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Dropdown</span></span><span class="token punctuation">></span></span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>组件名称以大驼峰式命名。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-元素变量"><a aria-hidden="true" tabindex="-1" href="#jsx-元素变量"><span class="icon icon-link"></span></a>JSX 元素变量</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Greeting</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">let</span> button<span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span><span class="token property-access">isLoggedIn</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> button <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">GuestGreeting</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>button<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jsx-注释"><a aria-hidden="true" tabindex="-1" href="#jsx-注释"><span class="icon icon-link"></span></a>JSX 注释</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Student</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span> setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="5"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/* 这里写注释 */</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="6"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Fragment</span></span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="组件"><a aria-hidden="true" tabindex="-1" href="#组件"><span class="icon icon-link"></span></a>组件</h2><div class="wrap-body">
|
||||||
|
</div></div><div class="h2wrap-body"><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="函数组件"><a aria-hidden="true" tabindex="-1" href="#函数组件"><span class="icon icon-link"></span></a>函数组件</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">UserName</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token plain-text">Kenny</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><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">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Hello</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserName</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="10"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：每个组件都需要一个根元素，<a href="https://reactjs.org/docs/components-and-props.html">更多说明</a>。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-组件"><a aria-hidden="true" tabindex="-1" href="#class-组件"><span class="icon icon-link"></span></a>Class 组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">Welcome</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">name</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="class-组件-api"><a aria-hidden="true" tabindex="-1" href="#class-组件-api"><span class="icon icon-link"></span></a>Class 组件 API</h3><div class="wrap-body">
|
||||||
|
<!--rehype:wrap-class=row-span-2-->
|
||||||
|
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="额外的-api"><a aria-hidden="true" tabindex="-1" href="#额外的-api"><span class="icon icon-link"></span></a>额外的 API</h4><div class="wrap-body">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.forceUpdate()</code></td><td>强制重新渲染</td></tr><tr><td align="left"><code>this.setState({ ... })</code></td><td>更新状态</td></tr><tr><td align="left"><code>this.setState(state =>{ ... })</code></td><td>更新状态</td></tr></tbody></table>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="属性-1"><a aria-hidden="true" tabindex="-1" href="#属性-1"><span class="icon icon-link"></span></a>属性</h4><div class="wrap-body">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>defaultProps</code></td><td>默认 props</td></tr><tr><td align="left"><code>displayName</code></td><td>显示组件名称(用于调试)</td></tr></tbody></table>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h4wrap"><h4 id="实例属性"><a aria-hidden="true" tabindex="-1" href="#实例属性"><span class="icon icon-link"></span></a>实例属性</h4><div class="wrap-body">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<table><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>this.props</code></td><td>组件接受参数</td></tr><tr><td align="left"><code>this.state</code></td><td>组件内状态</td></tr></tbody></table>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="pure-组件"><a aria-hidden="true" tabindex="-1" href="#pure-组件"><span class="icon icon-link"></span></a>Pure 组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token maybe-class-name">PureComponent</span><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
|
||||||
|
</span><span class="code-line line-number" line="2">
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">MessageBox</span> <span class="token keyword">extends</span> <span class="token class-name">PureComponent</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> ···
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌入内部组件"><a aria-hidden="true" tabindex="-1" href="#嵌入内部组件"><span class="icon icon-link"></span></a>嵌入内部组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">UserAvatar</span></span> <span class="token keyword module">from</span> <span class="token string">"./UserAvatar"</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">
|
||||||
|
</span><span class="code-line line-number" line="4"><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">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">UserAvatar</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="9"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="10"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：假设 <code>UserAvatar</code> 在 <code>UserAvatar.js</code> 中声明。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌入外部组件"><a aria-hidden="true" tabindex="-1" href="#嵌入外部组件"><span class="icon icon-link"></span></a>嵌入外部组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><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 class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">CompName</span></span> <span class="token keyword module">from</span> <span class="token string">'component-name'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="3">
|
||||||
|
</span><span class="code-line line-number" line="4"><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">UserProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UserProfile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="7"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">CompName</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||||
|
</span></span><span class="code-line line-number" line="8"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>注意：外部组件在 <a href="https://www.npmjs.com">npmjs.com</a> 上找到，需要先安装导入。</p>
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="高阶组件"><a aria-hidden="true" tabindex="-1" href="#高阶组件"><span class="icon icon-link"></span></a>高阶组件</h3><div class="wrap-body">
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="2"><span class="token comment">// 高阶组件 with</span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> <span class="token function-variable function">with</span> <span class="token operator">=</span> <span class="token parameter">data</span> <span class="token arrow operator">=></span> <span class="token parameter"><span class="token maybe-class-name">WrappedComponent</span></span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">return</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> <span class="token maybe-class-name">Component</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="5"> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="6"> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="8"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||||
|
</span><span class="code-line line-number" line="9"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="10"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">WrappedComponent</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>data<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||||
|
</span><span class="code-line line-number" line="11"> <span class="token punctuation">)</span>
|
||||||
|
</span><span class="code-line line-number" line="12"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="13"> <span class="token punctuation">}</span>
|
||||||
|
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
|
||||||
|
</span></code></pre>
|
||||||
|
<p>使用高阶组件</p>
|
||||||
|
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">LowComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||||
|
</span><span class="code-line line-number" line="2"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">{</span>props<span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||||
|
</span><span class="code-line line-number" line="3"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||||
|
</span><span class="code-line line-number" line="4">
|
||||||
|
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> <span class="token maybe-class-name">MyComp</span> <span class="token operator">=</span> <span class="token keyword">with</span><span class="token punctuation">(</span><span class="token string">'Hello'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token maybe-class-name">LowComponent</span><span class="token punctuation">)</span>
|
||||||
|
</span></code></pre>
|
||||||
|
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="生命周期"><a aria-hidden="true" tabindex="-1" href="#生命周期"><span class="icon icon-link"></span></a>生命周期</h2><div class="wrap-body">
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="hooks"><a aria-hidden="true" tabindex="-1" href="#hooks"><span class="icon icon-link"></span></a>Hooks</h2><div class="wrap-body">
|
||||||
|
</div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">反应生命周期方法图</a></li>
|
||||||
|
</ul>
|
||||||
|
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||||
|
</html>
|
||||||
10
index.html
10
index.html
@ -36,7 +36,7 @@
|
|||||||
}
|
}
|
||||||
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="quick-reference"><a aria-hidden="true" tabindex="-1" href="#quick-reference"><span class="icon icon-link"></span></a>Quick Reference</h1><div class="wrap-body">
|
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="quick-reference"><a aria-hidden="true" tabindex="-1" href="#quick-reference"><span class="icon icon-link"></span></a>Quick Reference</h1><div class="wrap-body">
|
||||||
<p>为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 <a href="https://github.com/Randy8080/reference">Reference</a> 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。</p>
|
<p>为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 <a href="https://github.com/Randy8080/reference">Reference</a> 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。</p>
|
||||||
<p>如果您发现此处的备忘单不合适，您可以通过提交 PR 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
|
<p>如果您发现此处的备忘单不合适，您可以通过提交 <a href="https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md">PR</a> 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。</p>
|
||||||
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="编程"><a aria-hidden="true" tabindex="-1" href="#编程"><span class="icon icon-link"></span></a>编程</h2><div class="wrap-body">
|
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="编程"><a aria-hidden="true" tabindex="-1" href="#编程"><span class="icon icon-link"></span></a>编程</h2><div class="wrap-body">
|
||||||
<p class="home-card"><a href="./docs/bash.html" style="background: rgb(72 143 223/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 32 32">
|
<p class="home-card"><a href="./docs/bash.html" style="background: rgb(72 143 223/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 32 32">
|
||||||
<path d="M28.057 6.53 17.952.532a3.8 3.8 0 0 0-3.88 0L3.965 6.53A4.03 4.03 0 0 0 2 10.002v11.996a4.03 4.03 0 0 0 1.948 3.472l10.105 5.998a3.8 3.8 0 0 0 3.88 0L28.04 25.47a4.03 4.03 0 0 0 1.948-3.472V10.002a4.03 4.03 0 0 0-1.93-3.472zM20.23 25.262v.86a.318.318 0 0 1-.148.265l-.512.293c-.08.042-.148 0-.148-.113v-.847a1.66 1.66 0 0 1-1.164.113c-.062-.042-.086-.122-.056-.2l.183-.78a.322.322 0 0 1 .102-.17.18.18 0 0 1 .05-.035.11.11 0 0 1 .08 0 1.41 1.41 0 0 0 1.059-.134 1.41 1.41 0 0 0 .79-1.21c0-.438-.24-.62-.82-.625-.734 0-1.4-.14-1.43-1.224a3.137 3.137 0 0 1 1.186-2.4v-.872a.34.34 0 0 1 .148-.268l.494-.314c.08-.042.148 0 .148.116v.872a1.61 1.61 0 0 1 .967-.116c.07.04.098.128.064.2l-.173.773a.325.325 0 0 1-.138.195c-.02.012-.05.008-.074 0a1.28 1.28 0 0 0-.931.152 1.17 1.17 0 0 0-.706 1.037c0 .395.208.515.907.53.935 0 1.337.423 1.348 1.362a3.346 3.346 0 0 1-1.228 2.53zm5.293-1.45a.201.201 0 0 1-.078.194L22.9 25.558c-.024.02-.06.023-.087.007s-.04-.05-.033-.08v-.66a.184.184 0 0 1 .116-.162l2.516-1.507c.024-.02.06-.023.087-.007s.04.05.033.08v.582zM27.288 9.06l-9.562 5.906c-1.193.706-2.07 1.478-2.07 2.914v11.778c0 .86.353 1.4.882 1.58a3.14 3.14 0 0 1-.53.053 3.13 3.13 0 0 1-1.595-.441L4.308 24.853A3.3 3.3 0 0 1 2.706 22V10.002a3.304 3.304 0 0 1 1.602-2.858l10.105-5.998c.98-.58 2.196-.58 3.176 0l10.105 5.998c.833.504 1.4 1.35 1.552 2.3-.328-.713-1.083-.9-1.962-.395h.003z" fill-rule="evenodd"></path>
|
<path d="M28.057 6.53 17.952.532a3.8 3.8 0 0 0-3.88 0L3.965 6.53A4.03 4.03 0 0 0 2 10.002v11.996a4.03 4.03 0 0 0 1.948 3.472l10.105 5.998a3.8 3.8 0 0 0 3.88 0L28.04 25.47a4.03 4.03 0 0 0 1.948-3.472V10.002a4.03 4.03 0 0 0-1.93-3.472zM20.23 25.262v.86a.318.318 0 0 1-.148.265l-.512.293c-.08.042-.148 0-.148-.113v-.847a1.66 1.66 0 0 1-1.164.113c-.062-.042-.086-.122-.056-.2l.183-.78a.322.322 0 0 1 .102-.17.18.18 0 0 1 .05-.035.11.11 0 0 1 .08 0 1.41 1.41 0 0 0 1.059-.134 1.41 1.41 0 0 0 .79-1.21c0-.438-.24-.62-.82-.625-.734 0-1.4-.14-1.43-1.224a3.137 3.137 0 0 1 1.186-2.4v-.872a.34.34 0 0 1 .148-.268l.494-.314c.08-.042.148 0 .148.116v.872a1.61 1.61 0 0 1 .967-.116c.07.04.098.128.064.2l-.173.773a.325.325 0 0 1-.138.195c-.02.012-.05.008-.074 0a1.28 1.28 0 0 0-.931.152 1.17 1.17 0 0 0-.706 1.037c0 .395.208.515.907.53.935 0 1.337.423 1.348 1.362a3.346 3.346 0 0 1-1.228 2.53zm5.293-1.45a.201.201 0 0 1-.078.194L22.9 25.558c-.024.02-.06.023-.087.007s-.04-.05-.033-.08v-.66a.184.184 0 0 1 .116-.162l2.516-1.507c.024-.02.06-.023.087-.007s.04.05.033.08v.582zM27.288 9.06l-9.562 5.906c-1.193.706-2.07 1.478-2.07 2.914v11.778c0 .86.353 1.4.882 1.58a3.14 3.14 0 0 1-.53.053 3.13 3.13 0 0 1-1.595-.441L4.308 24.853A3.3 3.3 0 0 1 2.706 22V10.002a3.304 3.304 0 0 1 1.602-2.858l10.105-5.998c.98-.58 2.196-.58 3.176 0l10.105 5.998c.833.504 1.4 1.35 1.552 2.3-.328-.713-1.083-.9-1.962-.395h.003z" fill-rule="evenodd"></path>
|
||||||
@ -58,6 +58,14 @@
|
|||||||
<path d="M16.057 31.958a15.416 15.416 0 0 0 1.901-.125 15.825 15.825 0 0 0 4.193-1.151 16.528 16.528 0 0 0 5.057-3.391 15.922 15.922 0 0 0 3.255-4.573c.677-1.458 1.161-3.031 1.359-4.63.198-1.547.182-3.13-.057-4.667a16.195 16.195 0 0 0-1.057-3.719 15.426 15.426 0 0 0-1.141-2.156c-1.557-2.448-3.813-4.417-6.411-5.734A17.13 17.13 0 0 0 20.26.656h-.01c.161.083.323.172.464.266.156.099.318.198.469.302.755.51 1.458 1.099 2.078 1.771 1.417 1.526 2.396 3.401 2.953 5.391.38 1.307.583 2.661.661 4.021.057.99.057 1.99-.063 2.974-.198 1.693-.74 3.344-1.635 4.792a10.012 10.012 0 0 1-2.536 2.781c-1.661 1.234-3.839 1.974-5.917 1.484a5.091 5.091 0 0 1-.995-.344 6.254 6.254 0 0 1-1.042-.599 8.116 8.116 0 0 1-1.656-1.474 8.605 8.605 0 0 1-1.401-2.328 9.76 9.76 0 0 1-.656-3.391c-.042-1.698.297-3.401 1.135-4.891a8.503 8.503 0 0 1 2.219-2.557c.302-.24.62-.443.938-.641l.021-.01a6.976 6.976 0 0 0-1.922-.156 6.564 6.564 0 0 0-1.635.318 7.701 7.701 0 0 0-1.359.599 8.041 8.041 0 0 0-.974.661c-.281.24-.563.479-.823.74-1.495 1.536-2.359 3.573-2.698 5.672-.198 1.302-.198 2.615-.12 3.938.141 1.859.521 3.714 1.26 5.411a11.348 11.348 0 0 0 1.797 2.901 10.868 10.868 0 0 0 4.177 2.974c.901.359 1.859.62 2.818.719.099.021.198.021.276.021zm-3.911-.531a5.861 5.861 0 0 1-.599-.302c-.198-.115-.401-.224-.599-.349a11.13 11.13 0 0 1-2.12-1.698c-1.458-1.516-2.438-3.422-2.995-5.443-.38-1.38-.583-2.802-.661-4.229a16.458 16.458 0 0 1 .063-2.776c.177-1.677.661-3.333 1.5-4.771a9.098 9.098 0 0 1 2.375-2.74 8.147 8.147 0 0 1 2.177-1.198 7.079 7.079 0 0 1 3.417-.359c.443.057.88.156 1.281.297.036 0 .036 0 .057.042.021.021.063.021.083.036.057.026.135.063.219.099.318.161.635.365.938.563a8.408 8.408 0 0 1 2.797 3.333c.557 1.219.818 2.583.839 3.922.021 1.438-.24 2.875-.859 4.193a8.558 8.558 0 0 1-3.516 3.776c.12.042.24.057.359.099.302.057.599.099.917.099 1.958.063 3.859-.88 5.255-2.198.26-.24.5-.5.719-.776.302-.359.583-.719.823-1.099.318-.5.578-1 .818-1.536.302-.719.536-1.458.677-2.219.26-1.339.281-2.698.198-4.036-.177-2.698-.896-5.396-2.453-7.63-.24-.339-.479-.661-.74-.958a13.11 13.11 0 0 0-1.422-1.38A10.994 10.994 0 0 0 19.876.97a12.981 12.981 0 0 0-2.255-.797L17.22.09c-.276-.042-.557-.057-.844-.078a10.636 10.636 0 0 0-1.354.021c-.938.057-1.88.214-2.813.448C7.735 1.637 3.818 4.757 1.735 8.892A15.851 15.851 0 0 0 .177 18.1c.161 1.359.5 2.698 1.036 3.969.307.76.682 1.5 1.104 2.198 1.458 2.38 3.578 4.318 6.01 5.656.917.521 1.88.917 2.875 1.26.302.099.604.198.922.276z"></path>
|
<path d="M16.057 31.958a15.416 15.416 0 0 0 1.901-.125 15.825 15.825 0 0 0 4.193-1.151 16.528 16.528 0 0 0 5.057-3.391 15.922 15.922 0 0 0 3.255-4.573c.677-1.458 1.161-3.031 1.359-4.63.198-1.547.182-3.13-.057-4.667a16.195 16.195 0 0 0-1.057-3.719 15.426 15.426 0 0 0-1.141-2.156c-1.557-2.448-3.813-4.417-6.411-5.734A17.13 17.13 0 0 0 20.26.656h-.01c.161.083.323.172.464.266.156.099.318.198.469.302.755.51 1.458 1.099 2.078 1.771 1.417 1.526 2.396 3.401 2.953 5.391.38 1.307.583 2.661.661 4.021.057.99.057 1.99-.063 2.974-.198 1.693-.74 3.344-1.635 4.792a10.012 10.012 0 0 1-2.536 2.781c-1.661 1.234-3.839 1.974-5.917 1.484a5.091 5.091 0 0 1-.995-.344 6.254 6.254 0 0 1-1.042-.599 8.116 8.116 0 0 1-1.656-1.474 8.605 8.605 0 0 1-1.401-2.328 9.76 9.76 0 0 1-.656-3.391c-.042-1.698.297-3.401 1.135-4.891a8.503 8.503 0 0 1 2.219-2.557c.302-.24.62-.443.938-.641l.021-.01a6.976 6.976 0 0 0-1.922-.156 6.564 6.564 0 0 0-1.635.318 7.701 7.701 0 0 0-1.359.599 8.041 8.041 0 0 0-.974.661c-.281.24-.563.479-.823.74-1.495 1.536-2.359 3.573-2.698 5.672-.198 1.302-.198 2.615-.12 3.938.141 1.859.521 3.714 1.26 5.411a11.348 11.348 0 0 0 1.797 2.901 10.868 10.868 0 0 0 4.177 2.974c.901.359 1.859.62 2.818.719.099.021.198.021.276.021zm-3.911-.531a5.861 5.861 0 0 1-.599-.302c-.198-.115-.401-.224-.599-.349a11.13 11.13 0 0 1-2.12-1.698c-1.458-1.516-2.438-3.422-2.995-5.443-.38-1.38-.583-2.802-.661-4.229a16.458 16.458 0 0 1 .063-2.776c.177-1.677.661-3.333 1.5-4.771a9.098 9.098 0 0 1 2.375-2.74 8.147 8.147 0 0 1 2.177-1.198 7.079 7.079 0 0 1 3.417-.359c.443.057.88.156 1.281.297.036 0 .036 0 .057.042.021.021.063.021.083.036.057.026.135.063.219.099.318.161.635.365.938.563a8.408 8.408 0 0 1 2.797 3.333c.557 1.219.818 2.583.839 3.922.021 1.438-.24 2.875-.859 4.193a8.558 8.558 0 0 1-3.516 3.776c.12.042.24.057.359.099.302.057.599.099.917.099 1.958.063 3.859-.88 5.255-2.198.26-.24.5-.5.719-.776.302-.359.583-.719.823-1.099.318-.5.578-1 .818-1.536.302-.719.536-1.458.677-2.219.26-1.339.281-2.698.198-4.036-.177-2.698-.896-5.396-2.453-7.63-.24-.339-.479-.661-.74-.958a13.11 13.11 0 0 0-1.422-1.38A10.994 10.994 0 0 0 19.876.97a12.981 12.981 0 0 0-2.255-.797L17.22.09c-.276-.042-.557-.057-.844-.078a10.636 10.636 0 0 0-1.354.021c-.938.057-1.88.214-2.813.448C7.735 1.637 3.818 4.757 1.735 8.892A15.851 15.851 0 0 0 .177 18.1c.161 1.359.5 2.698 1.036 3.969.307.76.682 1.5 1.104 2.198 1.458 2.38 3.578 4.318 6.01 5.656.917.521 1.88.917 2.875 1.26.302.099.604.198.922.276z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span>JSON</span></a><!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
<span>JSON</span></a><!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||||
|
<a href="./docs/react.html" style="background: rgb(34 143 173/var(\-\-bg\-opacity));"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
|
||||||
|
<circle cx="12" cy="11.245" r="1.785"></circle>
|
||||||
|
<path d="m7.002 14.794-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452 0-1.452 1.684-2.711 4.617-3.452l.395-.1.111.391a19.507 19.507 0 0 0 1.136 2.983l.085.178-.085.178c-.46.963-.841 1.961-1.136 2.985l-.111.39zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542 0 .954 1.368 1.913 3.598 2.54.273-.868.603-1.717.985-2.54a20.356 20.356 0 0 1-.985-2.542zm10.572 6.095-.11-.392a19.628 19.628 0 0 0-1.137-2.984l-.085-.177.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39.395.1c2.935.741 4.617 2 4.617 3.453 0 1.452-1.683 2.711-4.617 3.452l-.395.101zm-.41-3.553c.4.866.733 1.718.987 2.54 2.23-.627 3.599-1.586 3.599-2.54 0-.956-1.368-1.913-3.599-2.542a20.683 20.683 0 0 1-.987 2.542z"></path>
|
||||||
|
<path d="m6.419 8.695-.11-.39c-.826-2.908-.576-4.991.687-5.717 1.235-.715 3.222.13 5.303 2.265l.284.292-.284.291a19.718 19.718 0 0 0-2.02 2.474l-.113.162-.196.016a19.646 19.646 0 0 0-3.157.509l-.394.098zm1.582-5.529c-.224 0-.422.049-.589.145-.828.477-.974 2.138-.404 4.38.891-.197 1.79-.338 2.696-.417a21.058 21.058 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985zm7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291.283-.29a19.827 19.827 0 0 0 2.021-2.477l.112-.16.194-.019a19.473 19.473 0 0 0 3.158-.507l.395-.1.111.391c.822 2.906.573 4.992-.688 5.718a1.978 1.978 0 0 1-1.005.257zm-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986.225 0 .423-.05.589-.145.829-.478.976-2.142.404-4.384-.89.198-1.79.34-2.698.419a20.526 20.526 0 0 1-1.71 2.124z"></path>
|
||||||
|
<path d="m17.58 8.695-.395-.099a19.477 19.477 0 0 0-3.158-.509l-.194-.017-.112-.162A19.551 19.551 0 0 0 11.7 5.434l-.283-.291.283-.29c2.08-2.134 4.066-2.979 5.303-2.265 1.262.727 1.513 2.81.688 5.717l-.111.39zm-3.287-1.421c.954.085 1.858.228 2.698.417.571-2.242.425-3.903-.404-4.381-.824-.477-2.375.253-4.004 1.841.616.67 1.188 1.378 1.71 2.123zM8.001 20.15a1.983 1.983 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391.395.1c.964.243 2.026.414 3.158.507l.194.019.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522zm-.993-5.362c-.57 2.242-.424 3.906.404 4.384.825.47 2.371-.255 4.005-1.842a21.17 21.17 0 0 1-1.713-2.123 20.692 20.692 0 0 1-2.696-.419z"></path>
|
||||||
|
<path d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017-.113-.162a25.697 25.697 0 0 1-1.126-1.769 26.028 26.028 0 0 1-.971-1.859l-.084-.177.084-.179c.299-.632.622-1.252.971-1.858.347-.596.726-1.192 1.126-1.77l.113-.16.196-.018a25.148 25.148 0 0 1 4.198 0l.194.019.113.16a25.136 25.136 0 0 1 2.1 3.628l.083.179-.083.177a24.742 24.742 0 0 1-2.1 3.628l-.113.162-.194.017c-.706.057-1.412.087-2.098.087zm-1.834-.904c1.235.093 2.433.093 3.667 0a24.469 24.469 0 0 0 1.832-3.168 23.916 23.916 0 0 0-1.832-3.168 23.877 23.877 0 0 0-3.667 0 23.743 23.743 0 0 0-1.832 3.168 24.82 24.82 0 0 0 1.832 3.168z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>React</span></a><!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
|
||||||
<a href="./docs/toml.html" style="background: rgb(132 132 132/var(\-\-bg\-opacity));"><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
<a href="./docs/toml.html" style="background: rgb(132 132 132/var(\-\-bg\-opacity));"><svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||||
<path fill="currentColor" d="M198.472 0v28.764h25.888v198.472h-25.888V256H256V0z"></path>
|
<path fill="currentColor" d="M198.472 0v28.764h25.888v198.472h-25.888V256H256V0z"></path>
|
||||||
<path fill="currentColor" d="M64.72 83.416v-31.64h126.56v31.64h-47.46v138.067h-31.64V83.416z"></path>
|
<path fill="currentColor" d="M64.72 83.416v-31.64h126.56v31.64h-47.46v138.067h-31.64V83.416z"></path>
|
||||||
|
|||||||
@ -605,6 +605,10 @@ body:not(.home) .h2wrap > h2 a::after {
|
|||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
|
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h2wrap-body > .wrap .wrap-body > *:last-child {
|
||||||
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.code-highlight {
|
.code-highlight {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@ -697,7 +701,7 @@ body:not(.home) .h2wrap > h2 a::after {
|
|||||||
color: var(--color-prettylights-syntax-entity-tag);
|
color: var(--color-prettylights-syntax-entity-tag);
|
||||||
}
|
}
|
||||||
.token.maybe-class-name {
|
.token.maybe-class-name {
|
||||||
color: var(--color-prettylights-syntax-variable);
|
color: var(--color-prettylights-syntax-entity);
|
||||||
}
|
}
|
||||||
.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin {
|
.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin {
|
||||||
color: var(--color-prettylights-syntax-constant);
|
color: var(--color-prettylights-syntax-constant);
|
||||||
@ -733,6 +737,9 @@ body:not(.home) .h2wrap > h2 a::after {
|
|||||||
.token.rule, .token.regex, .token.important, .token.keyword {
|
.token.rule, .token.regex, .token.important, .token.keyword {
|
||||||
color: var(--color-prettylights-syntax-keyword);
|
color: var(--color-prettylights-syntax-keyword);
|
||||||
}
|
}
|
||||||
|
.token.module {
|
||||||
|
color: var(--color-prettylights-syntax-variable);
|
||||||
|
}
|
||||||
.token.coord {
|
.token.coord {
|
||||||
color: var(--color-prettylights-syntax-meta-diff-range);
|
color: var(--color-prettylights-syntax-meta-diff-range);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user