nodejs 019: React组件 JSX基础语法规则 01

• 注：本文为JSX基础语法规则总结，除一二级标题外的大部分内容由LLM生成
• JSX（JavaScript XML）是一种语法扩展，主要用于 React 项目。它让我们可以在 JavaScript 中直接编写类似 HTML 的代码，简化了定义 UI 组件的过程（ JSX有点像JAVA的JSP）。
• JSX 将标记和逻辑紧密结合，使代码更具可读性和可维护性。JSX 是一个由 React 引入的概念，现在在其他框架（如 Vue 3）中也得到了应用。

Ⅰ.JSX 的基本概念

1. 类似 HTML 的语法

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

2. 在组件中使用 JSX
   JSX 最常用于定义 React 组件的结构。React 组件是一个返回 JSX 的函数或类，可以将复杂的 UI 拆分成独立、可复用的组件。例如：

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

JSX 的特点和优势

• 内嵌表达式：在 JSX 中可以嵌入任何 JavaScript 表达式，只需将其包裹在 {} 中。

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

• 支持条件渲染：可以使用 JavaScript 的条件运算符进行条件渲染。

  function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return (
      <div>
        {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
      </div>
    );
  }
  

• 支持循环渲染：可以通过 map 等方法来渲染列表。

  const numbers = [1, 2, 3, 4, 5];
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>{number}</li>
  );
  
  return <ul>{listItems}</ul>;
  

Ⅱ.className

• className 是 JSX 中用于指定 HTML 元素 CSS 类的属性。在标准的 HTML 中，我们使用 class 属性来指定样式，但在 JSX 中，因为 class 是 JavaScript 的保留字，所以改成了 className。

• 在 JSX 中设置 className 非常简单，类似于 HTML 的 class，只需在元素上添加 className 属性并赋值一个字符串即可：

function MyComponent() {
  return <div className="my-class">Hello, World!</div>;
}

• 动态设置 className ;

• 1. 三元运算符

使用三元运算符来根据条件设置 className：

function MyComponent({ isActive }) {
  return <div className={isActive ? "active" : "inactive"}>Hello, World!</div>;
}

• 2. 模板字符串

如果需要组合多个类，可以使用模板字符串（ES6 的字符串模板语法）：

function MyComponent({ isActive, isLarge }) {
  return <div className={`${isActive ? "active" : ""} ${isLarge ? "large" : ""}`}>Hello, World!</div>;
}

• 3. 使用条件库 classnames

在大型项目中管理多个条件类时，可以使用 classnames 库。它简化了 className 的管理，让代码更加清晰易读：

npm install classnames

使用示例：

import classNames from 'classnames';

function MyComponent({ isActive, isLarge }) {
  const classes = classNames({
    active: isActive,
    large: isLarge,
    'extra-class': true,
  });

  return <div className={classes}>Hello, World!</div>;
}

在上面的代码中，classnames 自动生成类名字符串。如果 isActive 和 isLarge 为 true，生成的 className 会是 active large extra-class。

通过样式文件使用 className

通常，我们会在组件中用 className 连接 CSS 样式表，方法是将样式写在 CSS 文件中，然后通过 className 引用。

使用 CSS 模块

在 React 中也可以使用 CSS 模块，这样可以避免样式的全局污染。CSS 模块会自动生成独特的类名，以保证样式只在当前组件中有效。

• 首先，创建一个 CSS 模块文件，比如 MyComponent.module.css：

  /* MyComponent.module.css */
  .active {
       
    color: red;
  }
  
  .large {
       
    font-size: 2em;
  }
  

• 在组件中导入这个 CSS 模块并应用样式：

  import styles from './MyComponent.module.css';
  
  function MyComponent({ isActive, isLarge }) {
    return (
      <div className={`${isActive ? styles.active : ""} ${isLarge ? styles.large : ""}`}>
        Hello, World!
      </div>
    );
  }