仅使用ReactJS能否实现类似CSS的高级样式？有无简洁方案？

当然可以！只用ReactJS完全能实现你提到的这类CSS级别的样式控制，关键是选对方法——既能贴合React的组件化思路，又能尽量保留CSS的简洁性。下面分情况给你具体方案：

1. 处理active状态（类似#primary-nav .list-group-item.active {}） #

你提到的用JavaScript逻辑判断状态的思路是对的，React里可以更优雅地实现：

• 用组件状态（useState）管理active状态，然后通过动态类名绑定样式：

import { useState } from 'react';

function PrimaryNav() {
  const [activeItemId, setActiveItemId] = useState('item1');

  return (
    <div id="primary-nav">
      {['item1', 'item2', 'item3'].map(itemId => (
        <div 
          key={itemId}
          className={`list-group-item ${activeItemId === itemId ? 'active' : ''}`}
          onClick={() => setActiveItemId(itemId)}
        >
          导航项 {itemId}
        </div>
      ))}
    </div>
  );
}

• 也可以用clsx这类工具库简化类名拼接（不用额外引入也能写，但工具类会让代码更干净）。

2. 处理hover触发子元素样式（类似#secondary-nav .list-group-item:hover>.background-item {}） #

这个场景优先用CSS类方案，比JS模拟简洁太多，React完全不排斥原生CSS的使用：

方案一：原生CSS/CSS Modules（最简洁） #

直接写常规的CSS嵌套选择器，给React组件绑定对应的类名即可：

/* 全局CSS或CSS Modules文件 */
#secondary-nav .list-group-item:hover > .background-item {
  opacity: 1;
  transform: translateX(0);
  /* 你的样式 */
}

然后在组件里正常使用类名：

function SecondaryNav() {
  return (
    <div id="secondary-nav">
      <div className="list-group-item">
        导航项
        <div className="background-item">背景元素</div>
      </div>
    </div>
  );
}

这种方式完全保留了CSS的简洁性，是最推荐的做法——hover这类纯样式交互，本来就该交给CSS处理。

方案二：CSS-in-JS库（组件化+CSS简洁性） #

如果想把样式和组件绑定，避免全局样式污染，可以用styled-components这类CSS-in-JS库，它支持类似原生CSS的嵌套语法：

import styled from 'styled-components';

const ListGroupItem = styled.div`
  &:hover > .background-item {
    opacity: 1;
    transform: translateX(0);
    /* 你的样式 */
  }
`;

function SecondaryNav() {
  return (
    <div id="secondary-nav">
      <ListGroupItem className="list-group-item">
        导航项
        <div className="background-item">背景元素</div>
      </ListGroupItem>
    </div>
  );
}

写法和原生CSS几乎一致，同时样式是组件级别的，符合React的组件化理念。

方案三：JS事件监听（适合结合复杂逻辑） #

如果hover时需要同时触发JS逻辑（比如请求数据、更新状态），再用React的鼠标事件监听：

import { useState } from 'react';

function SecondaryNavItem() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className="list-group-item"
      onMouseEnter={() => {
        setIsHovered(true);
        // 这里可以加额外的JS逻辑，比如日志、API请求
      }}
      onMouseLeave={() => setIsHovered(false)}
    >
      导航项
      <div 
        className="background-item"
        style={{ 
          opacity: isHovered ? 1 : 0,
          transform: isHovered ? 'translateX(0)' : 'translateX(-100%)'
        }}
      >
        背景元素
      </div>
    </div>
  );
}

这个方案比CSS麻烦，但适合需要样式与JS逻辑联动的场景。

总结 #

• 纯样式交互（比如hover、active）：优先用原生CSS/CSS Modules/CSS-in-JS，保留CSS的简洁性，不要强行用JS模拟。
• 样式需要结合复杂JS逻辑：再用React状态+事件监听的方式。

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