React - jsx 语法

在 React 中，JSX（JavaScript XML）是一种语法扩展，它允许开发者在 JavaScript 代码中使用类似 HTML 的语法。JSX 提升了代码的可读性和可维护性，使得编写和构建用户界面更加直观。它被广泛应用于 React 组件的定义。

一、JSX 的基本语法

（一）基本元素

JSX 语法允许在 JavaScript 代码中直接使用 HTML 标签，例如：

const element = <h1>Hello, world!</h1>;

这里的 element 是一个 JSX 元素，表示一个包含文本的 h1 标签。

（二）嵌套标签

// 嵌套标签 利用 小括号() 
const element = (<div><h1>Hello, world!</h1><p>JSX 语法：嵌套标签使用小括号 () </p></div>
);

二、语法规则

（一）单一根标签

每个 JSX 表达式必须只有一个根元素；如果有多个元素，它们必须被包裹在一个父元素中。

若不想标签中增加额外的 <div>，可以用 <> 和 </> 元素来代替。这个空标签被称作 Fragment。

原理：JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

例如：

// 正确
const element = (<div><h1>Hello</h1><h2>World</h2></div>
);
// 或者
const element = (<><h1>Hello</h1><h2>World</h2></>
);
// 错误
const element = (<h1>Hello</h1><h2>World</h2>
);
// 且标签必须闭合// 正确
<input type="text">输入内容</input>
// 或者 
<input type="text" />// 错误
<input type="text">

（二）使用大括号

在 JSX 中，可以用 { }  包裹 JavaScript 表达式。

标签中混入 JS 表达式 时要使用 大括号 { }

例如：

const name = "Tom";
// 字符串 name 的值会被插入到 JSX 中
const element = <h1>Hello, {name}!</h1>; // Hello,Tom!

（三）条件渲染

const isLoggedIn = true;
// 可以使用 JavaScript 表达式来进行条件渲染
const greeting = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

function MyComponent({ isVisible }) {return (<div>{isVisible ? <p>这是可见的</p> : <p>这是不可见的</p>}</div>);
}

（四）循环渲染

通过数组方法（如：map）渲染列表：

// 通过数组方法（如 map）渲染列表
const numbers = [1, 2, 3, 4];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);

function MyComponent({ items }) {return (<ul>{items.map(item => (<li key={item.id}>{item.text}</li>))}</ul>);
}

（五）JSX 与组件

 父组件可以包含子组件

标签字母首写：

• 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错；
• 若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

function MyComponent() {return <h1>Hello from MyComponent!</h1>;
}
// 父组件可以包含子组件
function App() {return (<div><MyComponent /></div>);
}

（六）内联样式

可以通过 style 属性将行内样式应用于 JSX 元素，需要传入一个对象

// 内联样式 使用 双括号 {{ }}
const element = <div style={{ color: 'blue', fontSize: '20px' }}>内联样式</div>;

（七）事件处理

事件处理在 JSX 中使用驼峰命名法，使用 on<EventName> 的方式绑定事件，如，onClick事件。

function handleClick() {alert('8520!');
}const element = <button onClick={handleClick}>点击</button>;

（八）JSX 的编译

// jsx 语句
const element = <h1>Hello, world!</h1>;// 编译后：(标签，标签属性，标签内容）
const element = React.createElement('h1', null, 'Hello, world!');

三、总结

JSX 是一种强大的语法扩展，使得在 React 中构建用户界面更加简洁和清晰。通过使用 JSX，开发者可以轻松地构建和组织组件，并处理状态、事件和样式等功能。