JSX（JavaScript XML）是一種用于在React框架中編寫UI組件的語法擴展。它允許開發者將HTML標記直接嵌入到JavaScript代碼中，使得在React組件中編寫界面變得更加直觀和高效。在編譯過程中，JSX會被轉換成普通的JavaScript對象，這些對象被稱為React元素，然后React使用這些元素來構建DOM（Document Object Model）以渲染用戶界面。

JSX原是React框架的技術，Vue也可以拿來用，所以我們也需要了解一下

在 JSX 中嵌入表達式

const name = 'ZhangSan';
const element = <h1>Hello, {name}</h1>;

在 JSX 中嵌入函數

function formatName(user) {return user.firstName + ' ' + user.lastName;
}
?
const user = {firstName: 'Zhang',lastName: 'San'
};
?
const element = (<h1>Hello, {formatName(user)}!</h1>
);

在函數中使用JSX

function getGreeting(user) {if (user) {return <h1>Hello, {formatName(user)}!</h1>; ?}return <h1>Hello, Stranger.</h1>;}

JSX 中指定屬性

const element = <a href="https://www.legacy.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;

使用 JSX 指定子元素

const element = <img src={user.avatarUrl} />;
const element = (<div><h1>Hello!</h1><h2>Good to see you here.</h2></div>
);

JSX 表示對象

const element = (<h1 className="greeting">Hello, world!</h1>
);

JSX 防止注入攻擊

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

?關注公眾號：資小庫，問題快速答疑解惑