组件：网页的积木盒

跟我看：第一个自定义组件

组件是首字母大写、返回 JSX 的函数。习惯上每个放单独文件。创建 src/Header.jsx：

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

在 src/App.jsx 里用：

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

• import ... from ...——“从另一个文件借组件。” 和 export default 配对。
• <Header />——自定义标签！大写告诉 React：这不是 HTML，是我的组件。

还记得第 1 级的痛苦——每个页面复制菜单？消失了。页眉 只存在一次，在一个文件里。

跟我看：可换数据的组件（props）

可换字母的橡皮章——数据作为 props（属性）传给组件。文件 src/PlayerCard.jsx：

function PlayerCard({ name, position, number }) {
  return (
    <div className="card">
      <h3>{name} · #{number}</h3>
      <p>{position}</p>
    </div>
  );
}

export default PlayerCard;

在 App.jsx 里用：

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

Props 像 HTML 属性写。文字用引号，数字和 JavaScript 用 {}。组件在 ({ name, position, number }) 里拆开用。

跟我看：从数组生成列表

三张卡片手写——行。二十张呢？数据放数组，用 .map()：

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() 遍历数组，每项一张卡片。加球员 = 数组加一行。不用复制 HTML。（key 只是帮 React 区分卡片——放唯一的东西。）

轮到你了 💪

在 React 项目里为你的项目搭组件 kit：

1. 带网站名和菜单的 Header 组件。
2. 符合项目的卡片组件：🏫 TeacherCard（姓名、科目）· 🙋 HobbyCard（名称、描述）· 🌍 TripCard（地点、描述）· ⚽ PlayerCard（姓名、位置、号码）。
3. 数据放数组，用 .map() 渲染——至少 4 项。
4. 把旧网站的卡片样式复制到 src/App.css——CSS 知识原封不动！

这堂课你要记住

• 组件 = 文件 + 首字母大写的函数 + export default；通过 import 和 <Tag /> 使用。
• Props = 组件的可换数据：<Card name="Jake" number={1} />。
• 列表用 array.map() 画——数据驱动屏幕。

© 2026 Ing. Martin Polak / AlgoRhino · 内容使用条款