使用 JSX 编写标记：React 文档简介

简介

欢迎来到 React 文档！本实验将向你介绍如何使用 JSX 编写标记。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/StylingGroup(["Styling"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/components_props("Components and Props") react/StylingGroup -.-> react/css_in_react("CSS in React") subgraph Lab Skills react/jsx -.-> lab-100376{{"使用 JSX 编写标记"}} react/components_props -.-> lab-100376{{"使用 JSX 编写标记"}} react/css_in_react -.-> lab-100376{{"使用 JSX 编写标记"}} end

使用 JSX 编写标记

实验项目已在虚拟机中提供。一般来说，你只需在 App.js 中添加代码。

请使用以下命令安装依赖项：

npm i

你上面看到的标记语法称为 JSX。它是可选的，但大多数 React 项目因其便利性而使用 JSX。

JSX 比 HTML 更严格。你必须关闭标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包装在一个共享的父标签中，比如 <h1>...</h1> 或一个空的 <>...</> 包装器：

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

如果你有很多 HTML 要转换为 JSX，可以使用在线转换器。

要运行该项目，请使用以下命令。然后，你可以刷新 Web 8080 标签页来预览网页。

npm start

显示数据

JSX 允许你将标记放入 JavaScript 中。花括号允许你 “逃回” JavaScript，这样你就可以嵌入代码中的一些变量并显示给用户。例如，这将显示 user.name：

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

你也可以从 JSX 属性 “逃入 JavaScript”，但你必须使用花括号而不是引号。例如，className="avatar" 将 "avatar" 字符串作为 CSS 类传递，但 src={user.imageUrl} 读取 JavaScript user.imageUrl 变量的值，然后将该值作为 src 属性传递：

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

添加样式

在 React 中，你使用 className 指定 CSS 类。它的工作方式与 HTML 的 class 属性相同：

<img className="avatar" />

然后你在一个单独的 CSS 文件中为其编写 CSS 规则：

/* App.css */
.avatar {
  border-radius: 50%;
}

React 没有规定你如何添加 CSS 文件。在最简单的情况下，你会在 HTML 中添加一个 <link> 标签。如果你使用构建工具或框架，请查阅其文档以了解如何将 CSS 文件添加到你的项目中。

// App.js
import "./App.css";

你也可以在 JSX 花括号内放入更复杂的表达式，例如字符串拼接：

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

在上面的示例中，style={{}} 不是特殊语法，而是 style={ } JSX 花括号内的常规 {} 对象。当你的样式依赖于 JavaScript 变量时，可以使用 style 属性。

总结

恭喜你！你已经完成了“使用 JSX 编写标记”实验。你可以在 LabEx 中练习更多实验来提升你的技能。