我們將了解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中文網其他相關文章！
