第二章：Props —— 零件之间的接线

1 分钟 87 字第 24 / 962 个阅读单元

空调主机和遥控器是分开的，遥控器需要告诉显示面板该显示什么。这个“告诉”的过程就是 Props。

tsx

function LivingRoom() {
  return (
    <div>
      <TemperatureDisplay current={28} unit="°C" />
      <TemperatureDisplay current={82} unit="°F" />
    </div>
  );
}

function TemperatureDisplay({ current, unit }) {
  return <div>当前室温: {current}{unit}</div>;
}

核心规则：

text

Props 是单向的，只能父 → 子，不能反过来

  客厅 (父)
   │
   │  props: { current: 28, unit: "°C" }
   ▼
  温度显示器 (子)    ← 只能读 props，不能改

就像遥控器可以给空调发指令，但空调不能反过来操控遥控器。