第十四章：完整空调系统 Demo

const ThemeContext = createContext('light');

function SmartHomeApp() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <h1>智能家居</h1>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        切换主题
      </button>
      <RoomList />
    </ThemeContext.Provider>
  );
}

function RoomList() {
  const rooms = ['客厅', '卧室', '书房'];
  return (
    <div>
      {rooms.map(name => <Room key={name} name={name} />)}
    </div>
  );
}

function Room({ name }) {
  const theme = useContext(ThemeContext);
  const ac = useAirConditioner(26);

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <h2>{name}</h2>
      {ac.isOn ? (
        <Panel temp={ac.temp} mode={ac.mode} />
      ) : (
        <p>空调已关机</p>
      )}
      <button onClick={ac.turnOn}>开机</button>
      <button onClick={ac.turnOff}>关机</button>
    </div>
  );
}