将 HTML 转换为 JSX：JSX 和 JSX 规则

htmledit_views">

JSX 是 JavaScript 的语法扩展。您可以在 JavaScript 文件中编写 HTML 格式。

它基于 Web、Html、Css 和 JavaScript。Web 开发人员将页面内容分别编写为 Html 文件，将设计编写为 Css 文件，将逻辑编写为 JavaScript 文件。

须知： JSX 是一个语法扩展，而 React 是一个 JavaScript 库。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
<span style="color:var(--syntax-error-color)"><div</span> <span style="color:var(--syntax-name-color)">class=</span><span style="color:var(--syntax-string-color)">"wrapper"</span><span style="color:var(--syntax-error-color)">></span>HTML<span style="color:var(--syntax-error-color)"></div></span>

</code></span></span>

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
<span style="color:var(--syntax-error-color)">//</span><span style="color:var(--syntax-error-color)">CSS</span>

<span style="color:var(--syntax-name-color)">.wrapper</span> <span style="color:var(--syntax-text-color)">{</span>
   <span style="color:var(--syntax-text-color)">display</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">flex</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span></span>

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">myFunction</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">document</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">getElementById</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">wrapper</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">).</span><span style="color:var(--syntax-name-color)">innerHTML</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Hello world</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span></span>

但是，随着 Web 的交互性越来越强，逻辑也变得越来越重要。JavaScript 正在管理 Html。因此，在 React 中，逻辑和格式在组件中共存。

React 组件示例 ：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">React</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span>

<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">App</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setFormData</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">username</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">password</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">});</span>

  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">handleChange</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">event</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-name-color)">setFormData</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">prevState</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-text-color)">...</span><span style="color:var(--syntax-name-color)">prevState</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">]:</span> <span style="color:var(--syntax-name-color)">value</span> <span style="color:var(--syntax-text-color)">}));</span>
  <span style="color:var(--syntax-text-color)">};</span>

  <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">form</span><span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">label</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-name-color)">Username</span><span style="color:var(--syntax-text-color)">:</span>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">input</span>
          <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">text</span><span style="color:var(--syntax-string-color)">"</span>
          <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">username</span><span style="color:var(--syntax-string-color)">"</span>
          <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">username</span><span style="color:var(--syntax-text-color)">}</span>
          <span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">handleChange</span><span style="color:var(--syntax-text-color)">}</span>
        <span style="color:var(--syntax-string-color)">/</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/label</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">label</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-name-color)">Password</span><span style="color:var(--syntax-text-color)">:</span>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">input</span>
          <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">password</span><span style="color:var(--syntax-string-color)">"</span>
          <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">password</span><span style="color:var(--syntax-string-color)">"</span>
          <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">formData</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">password</span><span style="color:var(--syntax-text-color)">}</span>
          <span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">handleChange</span><span style="color:var(--syntax-text-color)">}</span>
        <span style="color:var(--syntax-string-color)">/</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/label</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">input</span> <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">submit</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Submit</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-error-color)">/></span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/form</span>>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

请务必将渲染标记和逻辑放在一起，以使 HTML 标记在每次编辑时彼此同步。

React 组件是一个 JavaScript 函数，其中包含 React 在浏览器中渲染的标记。React 组件使用名为 JSX 的语法扩展来表示此标记。JSX 看起来像 Html。

JSX 的规则

1. 返回单个根元素

要从组件返回元素，请用单个 parent 标签包装它们。您可以使用 or 片段（<></>）

例如 div

<span style="color:var(--syntax-text-color)"><strong><code><span style="color:var(--syntax-error-color)"><div></span>
  <span style="color:var(--syntax-error-color)"><h1></span>Hedy Lamarr's Todos<span style="color:var(--syntax-error-color)"></h1></span>
  <span style="color:var(--syntax-error-color)"><img</span> 
    <span style="color:var(--syntax-name-color)">src=</span><span style="color:var(--syntax-string-color)">"https://picsum.photos/200/300"</span> 
    <span style="color:var(--syntax-name-color)">alt=</span><span style="color:var(--syntax-string-color)">"lorempicsum"</span> 
  <span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-error-color)"></div></span>
</code></strong></span>

例如 <></>

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><></span>
   <span style="color:var(--syntax-error-color)"><h1></span>Hedy Lamarr's Todos<span style="color:var(--syntax-error-color)"></h1></span>
  <span style="color:var(--syntax-error-color)"><img</span> 
    <span style="color:var(--syntax-name-color)">src=</span><span style="color:var(--syntax-string-color)">"https://picsum.photos/200/300"</span> 
    <span style="color:var(--syntax-name-color)">alt=</span><span style="color:var(--syntax-string-color)">"lorempicsum"</span> 
  <span style="color:var(--syntax-error-color)">/></span>
<span style="color:var(--syntax-error-color)"></></span>
</code></span>

Fragments 允许您对内容进行分组，而不会在浏览器 HTML 树中留下任何痕迹。

2. 关闭所有标签

在 JSX 中，所有标签都必须关闭。例如，Html 中的 img 等自闭合标签

示例：

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><img</span> 
    <span style="color:var(--syntax-name-color)">src=</span><span style="color:var(--syntax-string-color)">"https://picsum.photos/200/300"</span> 
    <span style="color:var(--syntax-name-color)">alt=</span><span style="color:var(--syntax-string-color)">"lorempicsum"</span> 
  <span style="color:var(--syntax-error-color)">/></span>
</code></span>

3. 驼峰式

在 React 中，许多 HTML 属性都是用 camelCase 编写的。

示例：

<span style="color:var(--syntax-text-color)"><code> <span style="color:var(--syntax-error-color)"><img</span> 
    <span style="color:var(--syntax-name-color)">src=</span><span style="color:var(--syntax-string-color)">"https://picsum.photos/200/300"</span> 
    <span style="color:var(--syntax-name-color)">alt=</span><span style="color:var(--syntax-string-color)">"lorempicsum"</span> 
    <span style="color:var(--syntax-name-color)">className=</span><span style="color:var(--syntax-string-color)">"photo"</span>
  <span style="color:var(--syntax-error-color)">/></span>

<span style="color:var(--syntax-error-color)"><button</span> <span style="color:var(--syntax-name-color)">onClick=</span><span style="color:var(--syntax-string-color)">{handleClick}</span><span style="color:var(--syntax-error-color)">></span>Click Me<span style="color:var(--syntax-error-color)"></button></span>

</code></span>

JSX 中的 JavaScript

在 JSX 中，有时你会想要添加一些 JavaScript 逻辑或引用此标记中的动态功能。在这种情况下，您可以在 JSX 中使用括号

将 string 属性传递给 JSX

当您想将 string 属性传递给 JSX 时，您可以将其放在单引号或双引号中

示例：

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">Avatar</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">img</span>
      <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">avatar</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-name-color)">src</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">https://picsum.photos/200/300</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-name-color)">alt</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">lorempicsum</span><span style="color:var(--syntax-string-color)">"</span>
    <span style="color:var(--syntax-error-color)">/></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span>

在这里，src 和 alt 作为字符串传递。但是，如果要动态指定 src 或 alt 文本，可以使用大括号而不是双引号的 JavaScript 中的值

示例：

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">Avatar</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">avatar</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">https://picsum.photos/200/300</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">description</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">lorempicsum</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">img</span>
      <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">avatar</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-name-color)">src</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">avatar</span><span style="color:var(--syntax-text-color)">}</span>
      <span style="color:var(--syntax-name-color)">alt</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">description</span><span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-string-color)">/</span>>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span>

使用大括号

可以使用带有大括号 {} 的 JavaScript。您可以使用函数、变量等。

示例：

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">React</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
     <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">content</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Toggle Text</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">ToggleText</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">isVisible</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setIsVisible</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">);</span>

      <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span><span style="color:var(--syntax-error-color)">></span>
          <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">isVisible</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">p</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-name-color)">This</span> <span style="color:var(--syntax-name-color)">text</span> <span style="color:var(--syntax-name-color)">is</span> <span style="color:var(--syntax-name-color)">toggleable</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/p></span>}
          <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">button</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">setIsVisible</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">isVisible</span><span style="color:var(--syntax-text-color)">)}</span><span style="color:var(--syntax-error-color)">></span>
            <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">content</span><span style="color:var(--syntax-text-color)">}</span>
          <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/button</span>>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
      <span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">}</span>

    <span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-name-color)">ToggleText</span><span style="color:var(--syntax-text-color)">;</span>
</code></span>

使用双花括号

React 不需要你使用内联样式（CSS 类在大多数情况下效果很好）。但是当你需要一个内联样式时，你可以将一个对象传递给 style 属性。使用双大括号。

示例：

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">TodoList</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">ul</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{{</span>
      <span style="color:var(--syntax-name-color)">backgroundColor</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">black</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">pink</span><span style="color:var(--syntax-string-color)">'</span>
    <span style="color:var(--syntax-text-color)">}}</span><span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">li</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-name-color)">lorem</span> <span style="color:var(--syntax-name-color)">ipsum</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/li</span>>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/ul</span>>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span>

你在 JSX 中看到 {{ }}，知道它是 JSX 卷曲中的对象。
内联样式属性应写入 camelCase。

你可以将多个表达式移动到一个对象中，并在 JSX 中的大括号内使用它们

<span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">person</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Gregorio Y. Zara</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">theme</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">backgroundColor</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">red</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">yellow</span><span style="color:var(--syntax-string-color)">'</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">};</span>

<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">TodoList</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">return </span><span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">person</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">theme</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">h1</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">person</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">s Todos</h1>
    </div>
  );
}


</span></code></span>

JSX 是使 Web 开发过程更加有效和实用的重要工具。使用 JSX，您可以将渲染标记和逻辑放在一起，以保持 html 贴花在每次编辑中彼此同步。