ReactJS：如何在其他模块中使用某一组件内定义的state状态变量

解决方法 #

React 组件内部通过useState定义的状态默认是私有属性，仅能在当前组件内部访问，要在其他模块使用该状态，可以根据你的使用场景选择以下方案：

方案1：状态提升（最适合初学者，90%的常规场景适用） #

把city_name状态从SearchCity组件移到它们的共同父组件中，再通过props把状态和修改状态的方法传递给SearchCity，其他需要用到city_name的组件也从父组件拿这个状态即可。

修改后的SearchCity组件代码：

import { useState } from "react";

const SearchCity = (props) => {
  // 从props接收状态值和修改方法
  const { type = "text", placeHolder = "search...", name, cityName, setCityName, onSearch } = props;
  return (
    <div className="flex border-2 border-gray-200 rounded">
      <input
        className="px-4 py-2 w-80 text-black take-input" // 注意React里要用className代替class属性
        type={type}
        name={name}
        placeholder={placeHolder}
        value={cityName}
        onChange={(e) => setCityName(e.target.value)}
      />
      <button
        className="px-4 text-white bg-gray-600 border-l"
        onClick={() => onSearch?.(cityName)} // 点击搜索时触发父组件传入的搜索回调
      >
        Search...
      </button>
    </div>
  );
};

export default SearchCity;

父组件使用示例：

import { useState } from 'react';
import SearchCity from './SearchCity';
// 其他需要用到city_name的组件
import ShowWeather from './ShowWeather';

function App() {
  // 把状态定义在父组件
  const [city_name, setCityName] = useState("");

  const handleSearch = (city) => {
    console.log('要搜索的城市是：', city);
    // 在这里执行搜索请求等逻辑
  }

  return (
    <div>
      {/* 把状态和方法传递给SearchCity */}
      <SearchCity 
        cityName={city_name}
        setCityName={setCityName}
        onSearch={handleSearch}
        placeHolder="请输入城市名"
      />
      {/* 其他组件直接用父组件的city_name状态即可 */}
      <ShowWeather city={city_name} />
    </div>
  )
}

export default App;

方案2：Context 状态共享（适合跨多层级组件使用的场景） #

如果需要使用city_name的组件和SearchCity之间间隔了多层组件，逐层传递props过于繁琐，可以用React内置的createContext+useContext实现全局状态共享：

1. 新建CityContext.js文件定义上下文：

import { createContext, useContext, useState } from 'react';

const CityContext = createContext();

export function CityProvider({ children }) {
  const [city_name, setCityName] = useState("");
  return (
    <CityContext.Provider value={{city_name, setCityName}}>
      {children}
    </CityContext.Provider>
  )
}

export function useCity() {
  return useContext(CityContext);
}

2. 在入口文件（如main.jsx）中包裹根组件：

import { CityProvider } from './CityContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <CityProvider>
    <App />
  </CityProvider>
)

3. 在任意组件中都可以直接获取/修改city_name：

// SearchCity组件里使用
import { useCity } from './CityContext';
const SearchCity = () => {
  const {city_name, setCityName} = useCity();
  // 其余逻辑保持不变
}

// 其他组件里使用
import { useCity } from './CityContext';
const OtherComponent = () => {
  const {city_name} = useCity();
  return <div>当前选择的城市是：{city_name}</div>
}

补充优化点 #

你原代码里的input标签用了class属性，React里要改为className才会生效，另外占位符的拼写错误从scarch改为search即可。

内容的提问来源于stack exchange，提问作者Siddhesh Jungade