React-jsx语法规则

JSX是一种类似HTML的语法扩展，用于在JavaScript代码中编写React组件的结构和内容。它提供了一种直观和便捷的方式来描述UI的层次结构，并与JavaScript代码无缝集成。

JSX语法规则

1. 标签（Tags）：使用类似HTML的标签来表示React组件。标签名称可以是内置的HTML标签（如<div>、<span>）或自定义的React组件。
2. 元素（Elements）：将标签包裹在大括号{ }中作为表达式使用。可以在标签中插入JavaScript表达式、变量和函数调用等。
3. 属性（Attributes）：使用类似HTML的属性来设置组件的属性。属性名称采用驼峰命名法，并使用等号=将属性值与属性名分隔。
4. 子元素（Children）：使用标签内的内容来表示组件的子元素。子元素可以是其他标签、文本内容或JavaScript表达式。
5. 注释（Comments）：使用类似JavaScript的注释语法{/* ... */}来添加注释。
6. 类名（Class Names）：使用className属性来指定组件的类名，以避免与JavaScript中的关键字class冲突。
7. 自闭合标签（Self-Closing Tags）：对于没有子元素的标签，可以使用类似HTML的自闭合标签语法，以斜杠/结尾。

使用标签和属性

import React from 'react';

// 使用标签和属性创建React组件
const MyComponent = () => {
  return (
    <div className="container">
      <h1>Hello, React!</h1>
      <p>This is a sample component.</p>
      <button disabled={true}>Click me</button>
    </div>
  );
};

在上面的示例中，我们创建了一个名为MyComponent的React组件，它包含一个<div>容器，里面包含了一个标题<h1>、一个段落<p>和一个禁用的按钮<button>。我们还使用className属性设置了容器的类名。

使用表达式和变量

import React from 'react';

// 使用表达式和变量创建React组件
const name = 'Alice';
const age = 25;

const UserInfo = () => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Birth Year: {new Date().getFullYear() - age}</p>
    </div>
  );
};

在上面的示例中，我们创建了一个名为UserInfo的React组件，它显示了一个用户的姓名、年龄和出生年份。我们使用了JavaScript表达式{name}和{age}来动态显示变量的值，并通过new Date().getFullYear()计算出了出生年份。

使用子元素

import React from 'react';

// 使用子元素创建React组件
const Card = ({ title, content }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">
        {content}
      </div>
    </div>
  );
};

const MyComponent = () => {
  return (
    <Card title="Welcome" content={<p>This is a sample card.</p>} />
  );
};

在上面的示例中，我们创建了一个名为Card的React组件，它接收title和content两个属性，并将它们作为子元素显示在卡片中。在MyComponent组件中，我们使用Card组件并通过属性传递了标题和内容。