React中点击跨组件按钮修改另一组件Div CSS样式的实现问题

你的问题核心是兄弟组件（Banner和Profile）之间的状态同步，React中这类场景最直接的解决方式是状态提升——将共享状态放到两个组件的共同父组件中，再通过props传递状态和修改方法。

原代码的问题 #

你直接调用Profile.changeStyle是错误的：changeStyle是Profile组件内部的函数，仅在组件实例化后存在，并非组件的静态属性，无法直接通过组件类访问。

修改后的完整代码 #

1. 共同父组件（比如App.js）

把控制Profile显示的状态和修改方法放在这里：

import Banner from "./Banner";
import Profile from "./Profile";
import { useState } from "react";

function App() {
  // 状态：控制Profile是否显示，初始为隐藏状态
  const [isProfileVisible, setIsProfileVisible] = useState(false);

  // 切换Profile显示状态的方法
  const toggleProfile = () => {
    setIsProfileVisible(prevState => !prevState);
  };

  return (
    <div className="app">
      {/* 把切换方法传给Banner组件 */}
      <Banner onProfileClick={toggleProfile} />
      {/* 把显示状态传给Profile组件 */}
      <Profile isVisible={isProfileVisible} />
    </div>
  );
}

export default App;

2. 修改Banner组件

接收父组件传递的点击回调，绑定到按钮上：

function Banner({ onProfileClick }) {
  return (
    <div className="banner">
      <span className="bannerbtnsettings">
        <button className="btnbannersettings">Settings</button>
      </span>

      <span className="bannerbtnprofile">
        {/* 调用父组件传入的回调方法 */}
        <button className="btnbannerprofile" onClick={onProfileClick}>Profile</button>
      </span>
    </div>
  );
}

export default Banner;

3. 修改Profile组件

根据父组件传递的状态决定样式类名：

import "../index.css";

const Profile = ({ isVisible }) => {
  // 根据传入的状态动态切换样式
  const styleClass = isVisible ? "profile-displayed" : "profile-hidden";
  
  return (
    <div>
      <div className={styleClass}> hellllo</div>
    </div>
  );
};

export default Profile;

替代方案（复杂场景） #

如果你的项目规模较大、组件层级较深，可以使用React Context或Redux等状态管理工具，但对于这种简单的兄弟组件通信，状态提升是最轻量、最易维护的方案。

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