React+TypeScript跨文件组件传递输入框城市值实现方案

兄弟组件之间传值用状态提升方案即可，把两个组件共享的城市名状态放到共同父组件维护，按以下方式修改三个文件即可跑通：

• 父组件Weather.tsx统一管理共享的cityName状态，同时给两个子组件分别下发状态更新方法、状态值
• 搜索组件CityWeatherSearch.tsx内部维护输入框的临时值，点击提交按钮时调用父组件传入的更新方法，把输入的城市名回传给父组件
• 展示组件MainWeatherLive.tsx直接接收父组件传入的cityName，渲染到预留位置即可

各文件代码参考 #

Weather.tsx（共同父组件） #

import { useState } from 'react';
import CityWeatherSearch from './CityWeatherSearch';
import MainWeatherLive from './MainWeatherLive';

const Weather = () => {
  // 共享状态提升到父组件管理
  const [cityName, setCityName] = useState<string>('');

  return (
    <div>
      {/* 下发状态更新回调给搜索组件 */}
      <CityWeatherSearch onSubmitCity={setCityName} />
      {/* 下发城市名状态给展示组件 */}
      <MainWeatherLive cityName={cityName} />
    </div>
  );
};

export default Weather;

CityWeatherSearch.tsx（搜索表单组件） #

import { useState, FormEvent } from 'react';

// 定义props类型
interface CitySearchProps {
  onSubmitCity: (city: string) => void;
}

const CityWeatherSearch = ({ onSubmitCity }: CitySearchProps) => {
  // 输入框临时状态只在组件内部维护即可，不需要上浮
  const [inputVal, setInputVal] = useState<string>('');

  const handleFormSubmit = (e: FormEvent) => {
    e.preventDefault();
    const trimedCity = inputVal.trim();
    if (!trimedCity) return;
    // 提交时触发父组件传入的回调，传入选中的城市名
    onSubmitCity(trimedCity);
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type="text"
        value={inputVal}
        onChange={(e) => setInputVal(e.target.value)}
        placeholder="输入要查询的城市"
      />
      <button type="submit">查询</button>
    </form>
  );
};

export default CityWeatherSearch;

MainWeatherLive.tsx（天气展示组件） #

// 定义props类型
interface MainWeatherProps {
  cityName: string;
}

const MainWeatherLive = ({ cityName }: MainWeatherProps) => {
  return (
    <div className="weather-show">
      {/* 直接使用父组件传入的城市名渲染 */}
      <p>A cidade é {cityName}</p>
      {/* 其余天气相关展示逻辑 */}
    </div>
  );
};

export default MainWeatherLive;

避坑提示 #

• React是单向数据流，兄弟组件不能直接互相传值，所有共享状态必须放到最近的共同祖先组件维护，再通过props逐层下发
• 输入过程中的临时值不需要放到父组件，避免不必要的全局重渲染，只有用户提交后的最终值才需要上浮共享
• 所有props必须提前声明TS类型，避免类型校验报错

内容的提问来源于stack exchange，提问作者Felipe Godoy