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

我们将了解JSX是什么以及JSX的规则。

---

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

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

• 需要知道：JSX 是一个语法扩展，而 React 是一个 JavaScript 库。

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

但随着网络的交互性变得越来越强，逻辑也变得更加重要。 JavaScript 正在管理 Html。因此，在 React 中，逻辑和格式一起存在于组件.
中

React 组件示例 :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

将渲染标记和逻辑保持在一起非常重要，以便在每次编辑时保持 html 标记彼此同步。

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

---

JSX 规则

1。返回单个根元素

要从组件返回元素，请用单个父标签包装它们。您可以使用 或片段 (<>)

例如 div

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  >
</div>

---

例如<>

<>
   <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />
</>

• 片段让您可以对内容进行分组，而不会在浏览器 HTML 树中留下任何痕迹。

---

2。关闭所有标签

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

示例 :

<img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />

---

3。驼峰式

在 React 中，许多 HTML 属性都是用 camelCase.

编写的

示例 :

 <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
    className="photo"
  />

<button onClick={handleClick}>Click Me</button>

---

JSX 中的 JavaScript

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

中使用括号

• 将字符串属性传递给 JSX

当你想将字符串属性传递给 JSX 时，可以将其放在单引号或双引号中

示例 :

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

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

示例 :

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

---

• 使用大括号

可以将 JavaScript 与 花括号 {} 一起使用。您可以使用函数、变量等等。

示例 :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

---

• 使用双花括号

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

示例 :

导出默认函数TodoList() {
  返回 （
    

• 你在 JSX 中看到 {{ }}，就知道它是 JSX 卷曲内的对象。

• 内联样式属性应写成驼峰命名法.

---

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

const 人 = {
  姓名：“格雷戈里奥·Y·扎拉”，
  主题： {
    背景颜色：'红色'，
    颜色：“黄色”
  }
};

导出默认函数 TodoList() {
  返回 （
    <div>




<hr>

<h2>
  
  
  结论
</h2>

<p>JSX 是一个重要的工具，可以使 Web 开发过程更加有效和实用。使用 JSX，您可以将渲染标记和逻辑保持在一起，以便在每次编辑中保持 html Decal 相互同步。</p>


<hr>

<p>如果你喜欢我的文章，可以请我一杯咖啡:)<br>
<img src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" alt="Converting HTML to JSX : JSX and Rules of JSX"></p>




          </div>

            
        

以上是将 HTML 转换为 JSX ：JSX 和 JSX 规则的详细内容。更多信息请关注PHP中文网其他相关文章！