首页 » React 教程 » React JSX

React JSX

摘要：在本教程中，您将了解 React JSX 以及如何在 React 应用程序中正确编写 JSX 元素。

React JSX 简介

JSX 代表 JavaScript XML。

JSX 为 JavaScript 提供了一个语法扩展，允许您在 JavaScript 中直接编写类似 HTML 的代码。

JSX 提供了富有表现力的语法，通过结合 JavaScript 的强大功能和 HTML 的简洁性，简化了在 React 应用程序中构建用户界面的过程。

在将响应返回到 Web 浏览器之前，React 使用 Babel 将 JSX 转换为原生 JavaScript 代码。

返回有效的 JSX

如果要返回一行 JSX，可以将 JSX 块的起始标签放在与 return 语句相同的行上。例如

const App = () => {
  return <h1>Hello, React!</h1>;
};Code language: JavaScript (javascript)

此外，可以使用一对圆括号 () 来包装 JSX。在这种情况下，起始圆括号 ( 必须与 return 语句在同一行上

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};Code language: JavaScript (javascript)

请注意，如果您没有将起始圆括号放在与 return 语句相同的行上，JavaScript 将假设该函数返回 undefined。

如果您返回多个 JSX 元素，则必须使用包含元素（如 div）将它们包装起来。例如

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>I love React.</p>
    </div>
  );
};Code language: JavaScript (javascript)

在本例中，我们使用 div 来包装 h1 和 p 元素。

如果您没有将这些元素包装在包含元素中，您将遇到编译错误。例如，以下代码将导致错误

const App = () => {
  return (
      <h1>Hello, React!</h1>
      <p>I love React.</p>
  );
};Code language: JavaScript (javascript)

如果您不想使用包含元素，因为它们可能与 CSS 规则冲突，则可以使用空 JSX 元素将它们包装起来

const App = () => {
  return (
    <>
      <h1>Hello, React!</h1>
      <p>I love React.</p>
    </>
  );
};Code language: JavaScript (javascript)

空方括号称为 React 片段。

编写 JSX 元素

JSX 从 HTML 继承了语法，因此您可以像编写 HTML 一样编写 JSX。例如

<p>This is a message</p>Code language: JavaScript (javascript)

某些 HTML 元素是自闭合的，例如 <input> 元素。在这种情况下，您需要在起始标签的末尾添加斜杠 (/)

<input type="text" />Code language: JavaScript (javascript)

在 JSX 中使用变量

要在 JSX 中显示 JavaScript 变量，可以使用大括号将其包装起来。例如

const App = () => {
  const name = 'John';
  return <p>Hello, {name}!</p>;
};Code language: JavaScript (javascript)

在本例中，我们声明了一个变量 name 并将其值初始化为 'John'。此外，我们在 JSX 中使用了 name 变量。

该组件将输出以下 HTML

<p>Hello, John!</p>Code language: JavaScript (javascript)

JSX 可以显示字符串和数字。例如

const App = () => {
  const name = 'John';
  const age = 25;
  return (
    <p>
      Hi, I'm {name}. I'm {age} years old.
    </p>
  );
};Code language: JavaScript (javascript)

输出

Hi, I'm John. I'm 25 years old.Code language: JavaScript (javascript)

但是 JSX 无法显示布尔值 (true、false)、null、undefined

const App = () => {
  const name = 'John';
  const age = 25;
  const active = true;
  let jobTitle = null;

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Age: {age}</li>
      <li>Status: {active}</li>
      <li>Job Title: {jobTitle}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

输出

  • 姓名：John
  • 年龄：25
  • 状态
  • 职位名称

在显示 JavaScript 数组时，JSX 会将所有元素连接成一个字符串

const App = () => {
  const name = 'John';
  const skills = ['JS', 'React', 'Node.js'];

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Skills: {skills}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

输出

  • 姓名：John
  • 技能：JSReactNode.js

在本例中，JSX 将 JS、React 和 Node.js 连接成一个字符串 JSReactNode.js 并显示它。

同样重要的是要注意，JSX 无法显示 JavaScript 对象。如果您尝试这样做，您将在 Web 浏览器中遇到错误。例如

const App = () => {
  const person = {
    name: 'John',
    age: 25,
  };
  return <p>{person}</p>;
};Code language: JavaScript (javascript)

错误

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead.Code language: JavaScript (javascript)

在 JSX 中使用表达式

要在 JSX 中使用表达式，请将其放在一对大括号中。例如

const App = () => {
  const name = 'John';
  const age = 25;
  const active = true;

  return (
    <ul>
      <li>Name: {name}</li>
      <li>Age: {age}</li>
      <li>Status: {active ? 'Active' : 'Inactive'}</li>
    </ul>
  );
};Code language: JavaScript (javascript)

输出

  • 姓名：John
  • 年龄：25
  • 状态：活跃

在本例中，我们使用 三元运算符 (?:) 根据 active 变量的值返回不同的字符串

<li>Status: {active ? 'Active' : 'Inactive'}</li>Code language: JavaScript (javascript)

添加元素道具

在 React 中，JSX 元素的属性称为 道具。

JSX 允许您为 JSX 元素分配任何道具。但是，如果道具接受字符串，则必须将其放在双引号中。例如

const App = () => {
  return (
    <form>
      <div>
        <label for="event">Event Name: </label>
        <input name="event" type="text" />
      </div>
      <div>
        <label for="event">Event Date: </label>
        <input name="email" type="date" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};Code language: JavaScript (javascript)

输出

如果您将 JavaScript 变量 分配给道具，则在执行此操作时不使用双引号，只使用大括号

const App = () => {
  const type = 'range';
  return (
    <div>
      <label for="zoom">Zoom Level:</label>
      <input id="zoom" name="zoom" type={type} min="0" max="100" />
    </div>
  );
};Code language: JavaScript (javascript)

输出

应用 CSS

在 JavaScript 中，class 是一个定义 类 的关键字。因此，您不能使用 class 关键字作为 JSX 元素的道具。相反，您使用 className。例如

const App = () => {
  return (
    <button className="btn" type="button">
      OK
    </button>
  );
};Code language: JavaScript (javascript)

输出

要将内联样式添加到 JSX 元素，请定义一个 JavaScript 对象，其属性与 CSS 属性相同。

但是，如果属性在其名称中包含连字符，例如 margin-top、background-color，则需要删除连字符 (-) 并将下一个字母大写。例如

const App = () => {
  return (
    <button
      type="button"
      style={{
        padding: '0.25rem 0.75rem',
        backgroundColor: '#F9DC5C',
        border: 'None',
        display: 'inline-block',
        minWidth: '80px',
        cursor: 'pointer',
      }}
    >
      OK
    </button>
  );
};Code language: JavaScript (javascript)

输出

请注意，style 道具的值中有两对大括号

  • 外侧一对表示我们将要使用 JSX 中的 JavaScript。
  • 内侧一对表示 JavaScript 对象。

以下组件显示了相同的按钮，但将 style 道具的值用作保存 JavaScript 对象的变量

const App = () => {
  const btnStyle = {
    padding: '0.25rem 0.75rem',
    backgroundColor: '#F9DC5C',
    border: 'None',
    display: 'inline-block',
    minWidth: '80px',
    cursor: 'pointer',
  };
  return (
    <button type="button" style={btnStyle}>
      OK
    </button>
  );
};Code language: JavaScript (javascript)

同样，for 是 JavaScript 中的一个关键字，您不能将其用作 <label> 元素的道具

<label for="email">
    <input type="email" id="email" />
</label>Code language: HTML, XML (xml)

相反，您使用 htmlFor 道具

<label htmlFor="email">
    <input type="email" id="email" />
</label>Code language: HTML, XML (xml)

总结

  • JSX 代表 JavaScript XML
  • JSX 是 JavaScript 的语法扩展，允许您在 JavaScript 代码中直接编写类似 HTML 的代码。
  • JSX 帮助您加快为 React 应用程序构建 UI 的速度。
本教程对您有帮助吗？
React Hello World
先前
React Hello World
接下来
React 道具
React Props