JSX（JavaScript XML）是一种在 JavaScript 中编写类似 XML 的语法扩展，常用于 React 应用程序中描述用户界面。下面是 JSX 的一些基本语法规则：
- 嵌套规则：JSX 元素可以相互嵌套，并且需要使用闭合标签。
<div> <h1>Hello, World!</h1> </div>
- 表达式插值：通过将 JavaScript 表达式放置在大括号
{}内来在 JSX 中插入动态内容。
const name = 'Alice'; const element = <h1>Hello, {name}!</h1>;
- 属性：可以使用属性为 JSX 元素添加额外的配置和数据。
const element = <input type="text" placeholder="Enter your name" />;
- 类名和样式：为 JSX 元素添加类名时，使用
className属性；设置样式时，使用style属性，并传递一个带有 CSS 属性的对象。
const element = <div className="container" style={{ color: 'red', fontSize: '16px' }}>Hello</div>;
- 注释：在 JSX 中使用注释时，需要将注释放在大括号内并以
{/* ... */}的形式包裹。
const element = ( <div> {/* This is a comment */} <h1>Hello, World!</h1> </div> );
- 条件渲染：可以使用条件语句（如
if或三元表达式）在 JSX 中进行条件渲染。
const isLogged = true; const element = <div>{isLogged ? <p>Welcome back!</p> : <p>Please log in.</p>}</div>;
- 列表渲染：可以使用 JavaScript 数组的
map()方法在 JSX 中进行列表渲染。
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li key={number}>{number}</li>); const element = <ul>{listItems}</ul>;
- 以上是 JSX 的一些基本语法规则，它们可以帮助我们以一种更直观、更具可读性的方式编写 React 组件的用户界面。
