掌握 React 系列二：核心 JSX 语法，让你的应用更灵活

2023-12-03 05:08:31

React 系列二：核心 JSX 语法

JSX 是一个 JavaScript 的语法扩展，专为 React 应用而设计。它允许你在 JavaScript 中使用类似 HTML 的语法来创建组件和渲染数据。JSX 语法简洁、易学，并且与 JavaScript 完美结合，使你可以更轻松地构建复杂的 UI 界面。

JSX 基础

JSX 的基本语法与 HTML 非常相似。你可以使用熟悉的 HTML 标签来创建组件，并在标签中使用 JavaScript 表达式来渲染数据。例如，以下代码创建一个简单的按钮组件：

const Button = () => {
  return <button>Click me!</button>;
};

在这个示例中，Button 函数是一个 React 组件，它返回一个 <button> 标签。<button> 标签中的文本内容是 Click me!。当这个组件被渲染时，它将在页面上显示一个带有 Click me! 文本的按钮。

JSX 中使用 JavaScript 表达式

JSX 中的 JavaScript 表达式可以使用大括号 {} 来包裹。这允许你在 JSX 中使用变量、函数和其他 JavaScript 代码。例如，以下代码创建一个带有计数器的按钮组件：

const CounterButton = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      Count: {count}
    </button>
  );
};

在这个示例中，CounterButton 函数是一个 React 组件，它返回一个 <button> 标签。<button> 标签中的文本内容是 Count: {count}。{count} 是一个 JavaScript 表达式，它使用 useState 钩子来获取当前的计数值。当这个组件被渲染时，它将在页面上显示一个带有 Count: 0 文本的按钮。当用户点击按钮时，handleClick 函数将被调用，计数器值将增加 1，并且按钮上的文本内容也将随之更新。