mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-20 14:07:32 +08:00
doc: update react.md cheatsheet. cdd57176b7
This commit is contained in:
jaywcjlove
@ -251,7 +251,7 @@
|
||||
</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>
|
||||
<p>从 <code>v16.2.0</code> 开始 <code>Fragment</code> 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <code><></></code> 效果是一样的。</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>
|
||||
@ -262,6 +262,56 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="refs-转发"><a aria-hidden="true" tabindex="-1" href="#refs-转发"><span class="icon icon-link"></span></a>Refs 转发</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 maybe-class-name">FancyButton</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">forwardRef</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">(</span><span class="token parameter">props<span class="token punctuation">,</span> ref</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="3"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></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="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>button</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 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 comment">// 你可以直接获取 DOM button 的 ref：</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> ref <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createRef</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><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">FancyButton</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>ref<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><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">FancyButton</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="class-组件内部使用-ref-属性"><a aria-hidden="true" tabindex="-1" href="#class-组件内部使用-ref-属性"><span class="icon icon-link"></span></a>Class 组件内部使用 ref 属性</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">Component</span><span class="token punctuation">,</span>createRef <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">class</span> <span class="token class-name">MyComponent</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="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">myRef</span> <span class="token operator">=</span> <span class="token function">createRef</span><span class="token punctuation">(</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><span class="code-line line-number" line="9"> <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="10"> <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">ref</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">myRef</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></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 punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>提示：Refs 适用于类组件，但不适用于函数组件（除非您使用 useRef hook，请参阅<a href="#hooks">hooks</a>）</p>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="函数组件内部使用-ref-属性"><a aria-hidden="true" tabindex="-1" href="#函数组件内部使用-ref-属性"><span class="icon icon-link"></span></a>函数组件内部使用 ref 属性</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">CustomTextInput</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 comment">// 这里必须声明 $input，这样 ref 才可以引用它</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> $input <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token keyword">function</span> <span class="token function">handleClick</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"> $input<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">focus</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 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>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>text<span class="token punctuation">"</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>$input<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>input</span>
|
||||
</span></span><span class="code-line line-number" line="11"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</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></span><span class="code-line line-number" line="12"><span class="token tag"> <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></span><span class="code-line line-number" line="13"><span class="token tag"> <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>
|
||||
</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-->
|
||||
@ -272,7 +322,7 @@
|
||||
</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">
|
||||
</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">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>
|
||||
@ -347,24 +397,24 @@
|
||||
</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><span class="code-line line-number" line="7">
|
||||
</span><span class="code-line line-number" line="8"><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="9">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>
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> avatarUrl <span class="token operator">=</span> <span class="token string">"img/picture.jpg"</span>
|
||||
</span><span class="code-line line-number" line="2"><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>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>avatarUrl<span class="token punctuation">}</span></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> element <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>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="6"><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>button</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line line-number" line="8"><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>
|
||||
<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">'张三'</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>
|
||||
@ -372,7 +422,7 @@
|
||||
</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="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">'三'</span><span class="token punctuation">,</span> <span class="token string">'张'</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>
|
||||
@ -439,7 +489,7 @@
|
||||
</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">
|
||||
</div></div><div class="h3wrap-body"><div class="wrap"><div class="wrap-header h4wrap"><h4 id="使用-2"><a aria-hidden="true" tabindex="-1" href="#使用-2"><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">
|
||||
|
||||
Reference in New Issue
Block a user