isomorphic-style-loader 如何为React列表组件添加‘active’类？

很简单，咱们可以通过React的状态管理来实现这个需求，具体步骤如下：

• 第一步：引入状态钩子
  因为你的组件是函数式组件，需要用useState来管理当前激活的列表项索引，先在顶部引入这个钩子：

  import React, { useState } from 'react';
  

• 第二步：添加状态变量
  在CommandList组件内部声明一个状态，用来记录当前激活项的索引，初始值可以设为-1（表示一开始没有激活项）：

  const CommandList = () => {
    // 新增状态：记录当前激活的列表项索引
    const [activeIndex, setActiveIndex] = useState(-1);
    
    // ... 原有代码
  };
  

• 第三步：处理列表项的点击事件
  给每个列表项添加onClick事件，点击时把当前项的索引设置为激活状态：

  <li 
    key={index} 
    className={/* 后面会处理类名 */}
    onClick={() => setActiveIndex(index)} // 新增点击事件
  >
    {command.command}
  </li>
  

• 第四步：动态拼接类名
  用模板字符串来动态生成className，当当前项的索引等于activeIndex时，就加上你定义的active类（记得先在CommandList.css里写好.active的样式哦）：

  <li 
    key={index} 
    className={`${s.commandListItem} ${activeIndex === index ? s.active : ''}`}
    onClick={() => setActiveIndex(index)}
  >
    {command.command}
  </li>
  

• 第五步：完善CSS样式
  在你的CommandList.css里添加active类的样式，比如：

  .commandListItem {
    /* 原有样式 */
  }
  
  .active {
    background-color: #f0f0f0;
    color: #2196f3;
    /* 其他你想要的激活状态样式 */
  }
  

完整的组件代码示例 #

import React, { useState } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './CommandList.css';

const CommandList = () => {
  const [activeIndex, setActiveIndex] = useState(-1);

  return (
    <ul className={s.commandList}>
      {data.commands.map((command, index) => (
        <li 
          key={index} 
          className={`${s.commandListItem} ${activeIndex === index ? s.active : ''}`}
          onClick={() => setActiveIndex(index)}
        >
          {command.command}
        </li>
      ))}
    </ul>
  );
};

export default withStyles(s)(CommandList);

如果你的需求是默认激活某一项，只需要把useState的初始值改成对应的索引就行，比如useState(0)就会默认激活第一个列表项~

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