数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学在 React.js 中使用 JSX
JSX 就像一种具有 JavaScript 能力的模板语言。它有助于创建 React 元素。它是 JavaScript 的扩展，用于包含 UI 元素。
示例
let message = <h1>Hello World </h1>;
h1 标签是众所周知的 HTML 标签，但使用 JSX，我们创建了一个包含 h1 标签和“Hello World”消息的变量。
JSX 的用途
虽然创建 React 元素并非必须使用 JSX，但它更直观，并有助于更容易地理解代码。React 秉承将 UI 逻辑和渲染逻辑放在一起的理念。
我们可以构建不同的松散耦合组件来实现关注点分离。
Expression embedding :
let name = ‘Steve’;
const welcomeMessage = <h1>Welcome, {name} </h1>;
ReactDOM.render(
welcomeMessage,
document.getElementById(‘app’)
);在上面的例子中，name 是一个值为 'Steve' 的变量，它用花括号嵌入到 const welcomeMessage 中。
任何有效的 JavaScript 表达式，包括函数，都可以在 JSX 中的花括号内使用。例如：{ 5 * 5 } 将返回 25。
在 JSX 表达式中使用函数的示例：
function getFullName(customer) {
return customer.firstName + ' ' + customer.lastName;
}
const customer = {
firstName: 'Amit',
lastName: 'Sharma'
};
const welcomeCustomer = (
<h1>
Welcome, { getFullName(customer) } !
</h1>
);
ReactDOM.render(
welcomeCustomer,
document.getElementById('app')
);我们可以通过将多行 JSX 代码包装在括号 () 中来添加它们。这也避免了自动分号插入的问题。编译时，JSX 代码将转换为常规 JavaScript 代码。
JSX 元素可以作为参数传递，也可以作为函数调用的返回值。它也可以用于条件语句。
JSX 元素上的属性
JSX 元素上使用的属性名称遵循驼峰命名法。例如：用于添加 CSS 类的类名属性命名为 className（因为 class 是 JavaScript 中的保留关键字，所以使用 className）。
tabIndex - 在常规 HTML 元素中，它将是小写的 tabindex，但在 JSX 中，它将是 tabIndex。
我们可以使用字符串字面量（例如 className="App"）或使用带花括号的 JSX 表达式（例如 className={Test}）来为属性赋值。
JSX 元素可以包含子元素，如果为空，则可以用 /> 关闭。
JSX 还通过在渲染之前转义嵌入在 JSX 表达式中的值来帮助防止跨站脚本攻击 (XSS)。
Babel 将 JSX 编译成常规 JavaScript 代码。示例：
const message = ( <div className="welcome"> Welcome ! </div> );
将转换为：
const message = React.createElement(
'div',
{className: 'welcome'},
' Welcome !'
);
浏览量：321
