React中跨文件通过按钮切换两个div类名的问题求助

问题根源 #

你尝试用useRef跨组件直接操作DOM元素切换类名，但仅实现了从Search到Today的操作，反向失效。这是因为useRef是组件内部的DOM引用工具，跨组件直接操作违背了React单向数据流的核心原则，会导致状态不同步、组件耦合度高的问题。

正确解决方案：状态提升 #

将控制类名显示/隐藏的状态放到两个组件的共同父组件中，通过props传递状态和回调函数，实现双向的类名切换逻辑。

1. 创建父组件管理共享状态 #

import React, { useState } from "react";
import Today from "./Today";
import Search from "./Search";

export default function App() {
  // 控制Search组件的显示/隐藏状态
  const [showSearch, setShowSearch] = useState(false);

  return (
    <div>
      {/* 把显示Search的回调传给Today组件 */}
      <Today onShowSearch={() => setShowSearch(true)} />
      {/* 根据状态渲染Search，同时传递隐藏自身的回调 */}
      {showSearch && <Search onHideSearch={() => setShowSearch(false)} />}
    </div>
  );
}

2. 改造Today组件，添加触发显示Search的逻辑 #

import React from "react";
import GPS from '../resources/gps.png'
import cloud from '../resources/Shower.png'
import location from '../resources/location.png'

export default function Today({ onShowSearch }) { 
    return(
        <div className="Today">
            <div className="Nav">
                {/* 点击按钮触发父组件回调，显示Search */}
                <button className="Search" onClick={onShowSearch}>Search for places</button>
                <img className="gps" src={GPS} alt="GPS icon" />
            </div>
            <div className="information">
                <img className="cloud" src={cloud} alt="Weather icon" />
                <h1>15<sub>°C</sub></h1>
                <h3>Shower</h3>
                <p> <span>Today</span> <span> Fri, 11 Dec</span> </p>
                <div className="location">
                    <img className="loca" src={location} alt="Location icon" />
                    <p>New Delhi</p>
                </div>
            </div>
        </div>
    )
}

3. 改造Search组件，添加触发隐藏自身的逻辑 #

import React from "react";
import Cross from '../resources/cross.png'

export default function Search({ onHideSearch }) {
    return (
        <div className="find-location">
            {/* 点击关闭按钮触发父组件回调，隐藏Search */}
            <button className="cross-button" onClick={onHideSearch}>
                <img className="cross" src={Cross} alt="Close icon" />
            </button> 
            <div className="search--tab">
                <input className="field" placeholder="🔍 search location" />
                <button className="clicked">Search</button>
            </div>
        </div>
    )
}

4. 扩展：动态切换类名（如动画效果） #

如果需要给find-location添加动态类名（比如显示/隐藏的过渡动画），可以在父组件中根据状态拼接类名，再传递给Search组件：

// 父组件中修改Search的渲染逻辑
{showSearch && (
  <Search 
    onHideSearch={() => setShowSearch(false)} 
    className={`find-location ${showSearch ? "active" : ""}`}
  />
)}

// Search组件接收className prop
export default function Search({ onHideSearch, className }) {
    return (
        <div className={className}>
            {/* 其余代码保持不变 */}
        </div>
    )
}

为什么不推荐跨组件用useRef？ #

• React的核心是单向数据流，状态由父组件统一管理，子组件通过props接收状态和回调，能保证组件状态的同步性和可预测性。
• 跨组件用useRef操作DOM会让组件耦合度飙升，后期维护难度大，还容易出现状态不同步的隐性问题。

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