React中如何根据非兄弟元素的类为目标元素设置CSS属性

由于selector1和selector2属于DOM树中不同分支，纯CSS选择器无法实现跨分支的状态关联（CSS仅支持父→子、兄弟间的选择逻辑），因此需要结合React的状态管理同步两者的样式状态。以下是两种常用实现方式：

方式一：状态提升（适合组件层级较浅的场景） #

1. 父组件定义共享状态 #

将控制selector1类名的状态提升至两者的共同父组件，通过props传递给子组件：

import { useState } from 'react';

function ParentComponent() {
  // 状态：true对应show类，false对应hide类
  const [isShow, setIsShow] = useState(false);

  // 状态切换方法（可根据实际触发逻辑调整）
  const toggleDisplayState = () => {
    setIsShow(prev => !prev);
  };

  return (
    <div>
      {/* 传递状态和切换方法给selector1 */}
      <div 
        className={`selector1 ${isShow ? 'show' : 'hide'}`}
        onClick={toggleDisplayState}
      ></div>
      
      <div className="div2">
        <div>
          <div>
            <div className="div3"></div>
            <div className="div4"></div>
            <div className="div5">
              <div className="div6"></div>
              <div className="div7"></div>
              <div className="div8">
                <table>
                  <thead>
                    {/* 根据状态设置selector2的背景色 */}
                    <tr 
                      className="selector2"
                      style={{ backgroundColor: isShow ? 'yellow' : 'red' }}
                    ></tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

2. 配合CSS（可选） #

若不想使用内联样式，可提前定义CSS类，通过状态切换类名：

/* selector1的状态样式 */
.selector1.show {
  /* 自定义show类样式 */
}
.selector1.hide {
  /* 自定义hide类样式 */
}

/* selector2的背景样式 */
.selector2.bg-yellow {
  background-color: yellow;
}
.selector2.bg-red {
  background-color: red;
}

修改selector2的类名：

<tr 
  className={`selector2 ${isShow ? 'bg-yellow' : 'bg-red'}`}
></tr>

方式二：React Context（适合组件层级较深、避免props drilling的场景） #

当selector1和selector2所在组件层级过深，props传递繁琐时，可使用Context共享状态：

1. 创建Context #

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

// 创建状态Context
const DisplayContext = createContext();

// 定义Context Provider组件
export function DisplayProvider({ children }) {
  const [isShow, setIsShow] = useState(false);
  const toggleState = () => setIsShow(prev => !prev);

  return (
    <DisplayContext.Provider value={{ isShow, toggleState }}>
      {children}
    </DisplayContext.Provider>
  );
}

// 自定义Hook简化Context消费
export function useDisplayState() {
  return useContext(DisplayContext);
}

2. 根组件包裹Provider #

import { DisplayProvider } from './DisplayContext';
import ParentComponent from './ParentComponent';

function App() {
  return (
    <DisplayProvider>
      <ParentComponent />
    </DisplayProvider>
  );
}

3. 消费Context #

selector1所在组件：

import { useDisplayState } from './DisplayContext';

function Selector1() {
  const { isShow, toggleState } = useDisplayState();
  return (
    <div 
      className={`selector1 ${isShow ? 'show' : 'hide'}`}
      onClick={toggleState}
    ></div>
  );
}

selector2所在组件：

import { useDisplayState } from './DisplayContext';

function Selector2() {
  const { isShow } = useDisplayState();
  return (
    <table>
      <thead>
        <tr 
          className={`selector2 ${isShow ? 'bg-yellow' : 'bg-red'}`}
        ></tr>
      </thead>
    </table>
  );
}

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