Frontend Academy · 课时

函数组件与属性

Q: 「函数组件与属性」这节课中我会学到什么？

将组件创建为函数，接收并解构属性，并使用 PropTypes 或 TypeScript 类型说明预期的数据结构。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将组件创建为函数，接收并解构属性，并使用 PropTypes 或 TypeScript 类型说明预期的数据结构。

函数组件与属性 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是 React 组件

React 组件是一个返回 JSX 的 JavaScript 函数。组件是 React 应用程序的构建模块，是可复用、可组合的用户界面片段。

function Welcome() {
  return <h1>Welcome to CoddyKit!</h1>;
}

// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;

属性 — 向下传递数据

属性（properties）用于将数据从父组件传递给子组件。组件会将属性作为第一个参数接收，该参数是一个普通对象。

function Greeting({ name, role }: { name: string; role: string }) {
  return <p>Hello, {name}! Your role is {role}.</p>;
}

// Usage:
<Greeting name="Alice" role="admin" />

用于属性的 TypeScript 接口

请为属性定义一个命名接口，以获得自动补全、类型检查和文档支持。

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'ghost';
}

function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

子内容属性

children 属性包含组件开始标签和结束标签之间的内容。请将其类型设为 React.ReactNode，以接受任何可渲染内容。

interface CardProps {
  title: string;
  children: React.ReactNode;
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

// Usage:
<Card title="Hello">
  <p>Card content goes here.</p>
</Card>

使用解构设置默认属性

请直接在解构模式中设置默认值。这是现代方法——现在不再建议使用已弃用的 defaultProps API。

function Alert({ type = 'info', message, onClose }: AlertProps) {
  return (
    <div className={`alert alert-${type}`}>
      <span>{message}</span>
      <button onClick={onClose}>×</button>
    </div>
  );
}

组合组件

组件可以组合：Page 使用 Layout，Layout 使用 Nav 和 Sidebar，而它们又分别使用 Button 和 Icon 等更小的原子组件。这棵组件树就是 React 组件树。

命名约定

组件名称必须以大写字母开头。小写名称会被视为 HTML 元素。<div> 是一个 HTML div；<Div> 是名为 Div 的 React 组件。

纯组件

如果相同的属性始终产生相同的输出，并且渲染过程中没有副作用，那么组件就是纯组件。纯组件更容易理解和优化。

// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;

// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
  localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
  return <p>{id}</p>;
};

将函数作为属性传递

函数（回调）会作为属性传递，使子组件能够向父组件传递信息。父组件定义函数，子组件调用函数。

function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
  return (
    <li>
      {text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}

展开属性

展开运算符会将对象中的所有属性传递给组件。这对包装器组件或透传组件很有用，但请谨慎使用——可能会传递意外的属性。

function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={`input-base ${props.className || ''}`} />;
}

属性上下文中的 Fragment 和键

将组件列表作为子内容渲染时，每个组件都必须拥有唯一的 key 属性。键可以帮助 React 识别哪些项目发生了变化、被添加或被移除。

快速检查

在现代 React 函数组件中，如何为属性提供默认值？

回顾：组件和属性

函数组件是返回 JSX 的 JavaScript 函数。属性用于将数据从父组件传递给子组件。请使用 TypeScript 接口定义属性类型。使用 children: React.ReactNode 接受插槽内容。在解构时设置默认值。将回调作为属性传递，实现子组件到父组件的通信。组件名称以大写字母开头。

常见问题解答

「函数组件与属性」课时是免费的吗？

是的 — 「函数组件与属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「函数组件与属性」这节课中我会学到什么？

将组件创建为函数，接收并解构属性，并使用 PropTypes 或 TypeScript 类型说明预期的数据结构。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「函数组件与属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy