跳到主要内容

组件与 JSX

如何把一段 UI 定义成组件？​

  • 组件: 描述一块 UI 的可复用函数，返回 React 可以渲染的内容，常见写法是返回 JSX;
  • 命名规则: 自定义组件以大写字母开头，使 <Profile /> 与小写的浏览器标签区分;
  • 定义位置: 在模块顶层定义组件，不在另一个组件的函数体中定义，否则每次渲染会产生新组件类型并可能重置状态;
function Profile() {
  return <img src="photo.png" alt="用户头像" />;
}

export default function Gallery() {
  return (
    <section>
      <Profile />
      <Profile />
    </section>
  );
}

如何让组件在多个文件间复用？​

  • 默认导出: 一个模块最多一个 default 导出，导入时可自行命名，例如 import Gallery from './Gallery';
  • 命名导出: 一个模块可以有多个命名导出，使用花括号按导出名导入，例如 import { Profile } from './Gallery';
  • 文件边界: 小型相关组件可以共处一文件，按复用需求和阅读负担拆分，不要求每个组件单独一个文件;
// Gallery.jsx
export function Profile() {
  return <img src="/profile.png" alt="用户头像" />;
}
export default function Gallery() {
  return (
    <section>
      <Profile />
    </section>
  );
}
// App.jsx
import Gallery, { Profile } from "./Gallery";

export default function App() {
  return (
    <>
      <Gallery />
      <Profile />
    </>
  );
}

JSX 如何描述嵌套结构？​

  • JSX: 在 JavaScript 中描述标记结构的语法扩展，构建工具会将其转换为 JavaScript；它与 React 是不同概念;
  • 根表达式: 一段相邻 JSX 标签需要共同父节点，也可用 Fragment 的 <>...</> 分组且不增加 DOM;
  • 换行返回: 多行 JSX 紧跟 return (，避免自动分号插入把返回语句提前结束;
function Intro() {
  return (
    <>
      <h1>React</h1>
      <p>用组件组织界面。</p>
    </>
  );
}

把 HTML 改成 JSX 时需要修正什么？​

  • 标签闭合: 显式关闭所有标签，包括 <img />、<br /> 等空元素;
  • 属性名称: 多数使用 camelCase，例如 className、htmlFor、strokeWidth；aria-* 和 data-* 保留连字符;
  • 转换工具: 可辅助批量转换，但仍需检查无障碍文本、动态数据和组件边界;