第八章：父子通信 —— 遥控器怎么控制空调 - 现代前后端完全指南：软件城市宇宙

Props 只能父→子。那子组件想通知父组件怎么办？父组件把函数通过 props 传下去，子组件调用它。

tsx

function LivingRoom() {
  const [masterTemp, setMasterTemp] = useState(26);

  return (
    <div>
      <h1>客厅温度: {masterTemp}°C</h1>
      <RemoteControl
        currentTemp={masterTemp}
        onTempChange={setMasterTemp}
      />
    </div>
  );
}

function RemoteControl({ currentTemp, onTempChange }) {
  return (
    <div>
      <p>当前: {currentTemp}°C</p>
      <button onClick={() => onTempChange(currentTemp - 1)}>降温</button>
      <button onClick={() => onTempChange(currentTemp + 1)}>升温</button>
    </div>
  );
}

text

LivingRoom (state: masterTemp=26)
    │                    ▲
    │ props              │ 调用 onTempChange(25)
    ▼                    │
RemoteControl ───────────┘