React JSX 语法简介

React JSX 是一种 JavaScript 的语法扩展，它允许你以一种类似 HTML 的方式编写 React 组件的标记。使用 JSX，你可以将组件的结构和状态以一种更直观的方式表达出来。

JSX 基础语法

  • JSX 可以将 JavaScript 表达式直接嵌入到标记中。
  • JSX 使用大括号 {} 来包裹 JavaScript 表达式。
const element = <h1>Hello, world!</h1>;
  • JSX 支持条件渲染和循环。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

JSX 属性

  • JSX 属性与 HTML 属性类似，但命名规则有所不同。属性名需要使用 camelCase。
  • JSX 属性可以接受任何有效的 JavaScript 值。
const element = <div tabIndex="0"></div>;

JSX 内联样式

  • JSX 内联样式需要使用对象字面量。
  • 样式对象的键需要使用 camelCase。
const style = { color: 'red', fontSize: 20 };
const element = <div style={style}>Hello, world!</div>;

JSX 事件处理

  • JSX 事件处理函数需要使用驼峰命名法。
  • 事件处理函数可以接受事件对象作为参数。
const clickHandler = (e) => {
  console.log('Clicked!');
};

const element = <button onClick={clickHandler}>Click me!</button>;

扩展阅读

更多关于 React JSX 的信息，您可以访问我们的 React JSX 官方文档。

<center><img src="https://cloud-image.ullrai.com/q/JSX_Example/" alt="JSX_Example"/></center>