状态提升与单向数据流

import { useState } from "react";

function CelsiusInput() {
  const [celsius, setCelsius] = useState("");
  return (
    <fieldset>
      <legend>摄氏度</legend>
      <input value={celsius} onChange={e => setCelsius(e.target.value)} />
    </fieldset>
  );
}

function FahrenheitInput() {
  const [fahrenheit, setFahrenheit] = useState("");
  return (
    <fieldset>
      <legend>华氏度</legend>
      <input value={fahrenheit} onChange={e => setFahrenheit(e.target.value)} />
    </fieldset>
  );
}

function TemperatureInput({
  scale,
  temperature,
  onTemperatureChange,
}: {
  scale: "C" | "F";
  temperature: string;
  onTemperatureChange: (t: string) => void;
}) {
  return (
    <fieldset>
      <legend>{scale === "C" ? "摄氏度(℃)" : "华氏度(℉)"}</legend>
      <input
        value={temperature}
        onChange={e => onTemperatureChange(e.target.value)}
      />
    </fieldset>
  );
}

import { useState } from "react";

// 假设 User = { id: number; name: string }
function UserPage({ users }: { users: User[] }) {
  // 共享状态提升到公共父组件，只存一份
  const [keyword, setKeyword] = useState("");

  // 过滤结果是派生值：渲染时现算，绝不另存一份 state（第 9 篇）
  const filtered = users.filter(u => u.name.includes(keyword));

  return (
    <>
      <FilterBar keyword={keyword} onKeywordChange={setKeyword} />
      <UserList users={filtered} />
    </>
  );
}

import { useState } from "react";

function toFahrenheit(celsius: number) { return (celsius * 9) / 5 + 32; }
function toCelsius(fahrenheit: number) { return ((fahrenheit - 32) * 5) / 9; }

// 尽力解析：输入非法就返回空串，别让 NaN 渲染到界面上
function tryConvert(temperature: string, convert: (t: number) => number): string {
  const num = Number(temperature);
  if (temperature.trim() === "" || Number.isNaN(num)) return "";
  return String(Math.round(convert(num) * 1000) / 1000);
}

function Calculator() {
  // 状态唯一：原始字符串 + 它属于哪个温标
  const [temperature, setTemperature] = useState("");
  const [scale, setScale] = useState<"C" | "F">("C");

  function handleCelsiusChange(t: string) { setScale("C"); setTemperature(t); }
  function handleFahrenheitChange(t: string) { setScale("F"); setTemperature(t); }

  // 另一个框的值是「派生」的：渲染时现算，不进 state（第 9 篇的教训）
  const celsius = scale === "F" ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === "C" ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <>
      <TemperatureInput scale="C" temperature={celsius}
        onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput scale="F" temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange} />
      <p>{celsius === "" ? "请输入温度" : `${celsius}℃ = ${fahrenheit}℉`}</p>
    </>
  );
}

<Layout user={user}>
  <Sidebar user={user}>      // Sidebar 自己不用 user，纯搬运
    <UserCard user={user} /> // 真正用它的在第三层
  </Sidebar>
</Layout>