React 学习导航

JSX 语法

什么是 JSX?

JSX 是 JavaScript 的语法扩展，它允许你在 JavaScript 文件中编写类似 HTML 的代码。

JSX 是 React 的核心部分，它让你可以在 JavaScript 中编写 HTML 结构，同时保持 JavaScript 的全部功能。 JSX 最终会被编译成普通的 JavaScript 函数调用。

// JSX 语法
function Welcome() {
  return <h1>你好，React!</h1>;
}

JSX 中的表达式

在 JSX 中，你可以使用花括号 {} 嵌入任何 JavaScript 表达式。

表达式示例

你好，小明!

你今年 25 岁了。

明年你将会 26 岁。

小明是你的名字。

function Greeting() {
  const name = "小明";
  const age = 25;
  
  return (
    <div>
      <h1>你好，{name}!</h1>
      <p>你今年 {age} 岁了。</p>
      <p>明年你将会 {age + 1} 岁。</p>
      <p>{name.toUpperCase()} 是你的名字。</p>
    </div>
  );
}

JSX 中的条件渲染

你可以在 JSX 中使用条件表达式来有条件地渲染内容。

三元运算符

主题切换器

切换深色和浅色模式。

主题切换器

当前主题: 浅色模式

用户状态

显示用户在线状态。

用户状态

离线最后在线: 刚刚

价格显示

显示原价和折扣价。

价格显示

原价: 100元

最终价格: 100元

逻辑与运算符

通知中心

你有 2 条未读通知

新消息新
系统通知
更新提醒新

if-else 语句

天气信息

⛅25°C

天气适宜。

登录状态

未登录

显示/隐藏内容

这段内容会根据按钮的点击状态显示或隐藏

用户角色

您以访客身份访问

数据加载示例

暂无数据

function ThemeSwitcher() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <div className={isDarkMode ? 'dark-theme' : 'light-theme'}>
      <h1>主题切换器</h1>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        {isDarkMode ? '切换到浅色模式' : '切换到深色模式'}
      </button>
      <p>
        当前主题: {isDarkMode ? '深色模式' : '浅色模式'}
      </p>
    </div>
  );
}

function UserStatus() {
  const [isOnline, setIsOnline] = useState(false);
  const [lastSeen, setLastSeen] = useState('刚刚');

  return (
    <div>
      <h1>用户状态</h1>
      <div className="status-indicator">
        <span className={isOnline ? 'online' : 'offline'}>
          {isOnline ? '在线' : '离线'}
        </span>
        {!isOnline && <span className="last-seen">最后在线: {lastSeen}</span>}
      </div>
      <button onClick={() => setIsOnline(!isOnline)}>
        {isOnline ? '设为离线' : '设为在线'}
      </button>
    </div>
  );
}

function PriceDisplay() {
  const [price, setPrice] = useState(100);
  const [isDiscounted, setIsDiscounted] = useState(false);

  const finalPrice = isDiscounted ? price * 0.8 : price;

  return (
    <div>
      <h1>价格显示</h1>
      <div className="price">
        原价: {price}元
        {isDiscounted && <span className="discount">(8折优惠)</span>}
      </div>
      <div className="final-price">
        最终价格: {finalPrice}元
      </div>
      <button onClick={() => setIsDiscounted(!isDiscounted)}>
        {isDiscounted ? '取消优惠' : '应用优惠'}
      </button>
    </div>
  );
}

JSX 中的事件处理

在 JSX 中，你可以使用事件处理函数来响应用户的交互。

事件处理示例

点击事件

输入事件

输入的内容:

鼠标事件

将鼠标移入此区域

文件上传

表单提交

function ClickExample() {
  const handleClick = () => {
    alert('按钮被点击了!');
  };

  return (
    <button onClick={handleClick}>
      点击我
    </button>
  );
}

JSX 中的表单处理

在 JSX 中，你可以使用受控组件来处理表单输入。

表单处理示例

function ControlledForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={handleChange}
        placeholder="姓名"
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
        placeholder="邮箱"
      />
      <textarea
        name="message"
        value={formData.message}
        onChange={handleChange}
        placeholder="留言"
      />
    </form>
  );
}

JSX 中的列表渲染

使用 map() 方法在 JSX 中渲染列表。

列表渲染示例

添加新项目

过滤和排序

商品列表

function FruitList() {
  const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
  
  return (
    <div>
      <h1>水果列表</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

注意：在渲染列表时，每个列表项都需要一个唯一的 "key" 属性，这有助于 React 识别哪些项发生了变化。在实际应用中，最好使用唯一的 ID 而不是索引作为 key。

JSX 中的属性

JSX 中的属性使用驼峰命名法，而不是 HTML 中的命名约定。

function Profile() {
  return (
    <div>
      {/* HTML 类名使用 className 而不是 class */}
      <h1 className="title">个人资料</h1>
      
      {/* 内联样式使用对象而不是字符串 */}
      <p style={{ color: 'blue', fontSize: '16px' }}>
        这是一个蓝色的段落。
      </p>
      
      {/* HTML for 属性变成 htmlFor */}
      <label htmlFor="name">姓名:</label>
      <input id="name" type="text" />
      
      {/* 事件处理器使用驼峰命名法 */}
      <button onClick={() => alert('按钮被点击了!')}>
        点击我
      </button>
    </div>
  );
}

JSX 中的注释

在 JSX 中添加注释的方法。

function Component() {
  return (
    <div>
      {/* 这是一个 JSX 注释 */}
      <h1>标题</h1>
      
      {/* 
        多行
        JSX 注释
      */}
      <p>段落</p>
      
      <div>
        文本
        {/* 行内注释 */}
        更多文本
      </div>
    </div>
  );
}

JSX 片段

使用 React Fragment 避免添加额外的 DOM 节点。

import React from 'react';

function ListItems() {
  return (
    <React.Fragment>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 3</li>
    </React.Fragment>
  );
}

Fragment 允许你将多个元素组合在一起，而不需要添加额外的 DOM 节点。这在创建表格行、列表项或需要特定父子关系的元素时特别有用。