我们将了解JSX是什么以及JSX的规则。
JSX 是 JavaScript 的语法扩展。 您可以在 JavaScript 文件中编写类似 HTML 的格式。
它基于Web、Html、Css 和JavaScript。 Web 开发人员分别将页面内容编写为 Html 文件，将设计编写为 Css 文件，将逻辑编写为 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。
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"
/>
</>
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
中使用括号当你想将字符串属性传递给 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中文网其他相关文章！
