如何在React中动态更新组件及其兄弟组件的className？

在React中，组件无法直接修改兄弟组件的状态或类名，因为每个组件的状态都是局部隔离的。要实现同时修改自身和兄弟组件的类名，最符合React设计理念的方式是将状态提升到共同的父组件，由父组件统一管理状态并控制两个组件的类名。

具体实现步骤 #

1. 将状态移到父组件
   在包含Collection和它的兄弟组件的父组件中声明toggleClass状态，同时定义修改状态的方法，并将状态和方法传递给Collection组件。

2. 父组件控制兄弟组件的类名
   父组件根据toggleClass的值，直接设置兄弟组件的类名。

3. Collection组件接收状态和方法
   Collection组件通过props获取父组件传递的状态和方法，用于自身的类名设置和点击事件触发。

代码示例 #

父组件（比如ParentComponent.js）

import { useState } from 'react';
import Collection from './Collection';

const ParentComponent = () => {
  const [toggleClass, setToggleClass] = useState(false);

  const handleToggle = () => {
    setToggleClass(prev => !prev);
  };

  const siblingClass = toggleClass ? "passive-sibling" : "active-sibling";

  return (
    <div>
      <Collection toggleClass={toggleClass} handleToggle={handleToggle} />
      <div className={`sibling-component ${siblingClass}`}>
        我是Collection的兄弟组件
      </div>
    </div>
  );
};

export default ParentComponent;

修改后的Collection组件（Collection.js）

const Collection = ({ toggleClass, handleToggle }) => {
  const toggleClassCheck = toggleClass ? "passive" : "active";

  return (
    <React.Fragment>
      <div className={`step ${toggleClassCheck}`}>
        <div className="atrium">
          <span>Collection</span>
        </div>
        <div className="content">
          <div
            className="moreThenOne"
            area="collectionTitle"
            onClick={handleToggle}
          >
            点击我切换类名
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Collection;

补充说明 #

如果不想用状态提升，也可以通过ref直接操作DOM元素，但这种方式不符合React的声明式编程理念，除非特殊情况不推荐使用。比如在Collection组件中创建ref，点击时通过nextElementSibling获取兄弟元素并修改类名，但这种方式会让代码耦合DOM结构，维护性差。

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