ReactJS与Redux：如何高亮当前点击的章节元素？

嘿，这个需求其实挺常见的，结合Redux的话，核心就是把「当前选中的章节ID」放进全局状态里，然后让左侧列表项根据这个状态来切换高亮样式就行。我给你一步步拆解下怎么做：

1. 扩展Redux状态与逻辑 #

首先得在Redux的状态里新增一个字段，用来记录当前选中的章节ID，比如currentChapterId。然后补充对应的action和reducer：

定义Action类型与Creator #

// actions/chapterActions.js
export const SET_CURRENT_CHAPTER = 'SET_CURRENT_CHAPTER';

export const setCurrentChapter = (chapterId) => ({
  type: SET_CURRENT_CHAPTER,
  payload: chapterId
});

更新Reducer #

假设你已经有一个管理章节的reducer，把它扩展一下：

// reducers/chapterReducer.js
import { SET_CURRENT_CHAPTER } from '../actions/chapterActions';

const initialState = {
  chapterList: [], // 你的章节列表数据
  currentChapterId: null // 新增的选中状态
};

const chapterReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_CURRENT_CHAPTER:
      return {
        ...state,
        currentChapterId: action.payload
      };
    // 其他已有的case...
    default:
      return state;
  }
};

export default chapterReducer;

别忘了把这个reducer合并到你的根reducer里（如果还没做的话）。

2. 改造ChapterList组件 #

接下来让ChapterList组件连接Redux，获取currentChapterId和setCurrentChapter方法，然后给每个章节项添加点击事件和高亮判断：

// components/ChapterList.js
import React from 'react';
import { connect } from 'react-redux';
import { setCurrentChapter } from '../actions/chapterActions';
import './ChapterList.css';

const ChapterList = ({ chapterList, currentChapterId, setCurrentChapter }) => {
  return (
    <div className="chapter-list-container">
      {chapterList.map(chapter => (
        <div
          key={chapter.id}
          // 核心：判断当前章节是否被选中，添加高亮类
          className={`chapter-item ${currentChapterId === chapter.id ? 'active' : ''}`}
          onClick={() => setCurrentChapter(chapter.id)}
        >
          {chapter.title}
        </div>
      ))}
    </div>
  );
};

// 从Redux状态中映射需要的属性
const mapStateToProps = (state) => ({
  chapterList: state.chapters.chapterList,
  currentChapterId: state.chapters.currentChapterId
});

// 映射dispatch方法到组件props
const mapDispatchToProps = {
  setCurrentChapter
};

export default connect(mapStateToProps, mapDispatchToProps)(ChapterList);

3. 添加高亮样式 #

创建对应的CSS文件，写好active类的高亮样式，你可以根据示例页面调整颜色、间距这些：

/* components/ChapterList.css */
.chapter-list-container {
  width: 250px;
  background-color: #f5f5f5;
  padding: 1rem;
}

.chapter-item {
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chapter-item:hover {
  background-color: #e0e0e0;
}

/* 高亮样式，按需调整 */
.chapter-item.active {
  background-color: #2196f3;
  color: white;
  font-weight: 500;
}

4. 同步Content组件的内容展示 #

最后，Content组件也需要连接Redux，根据currentChapterId来渲染对应的内容：

// components/Content.js
import React from 'react';
import { connect } from 'react-redux';

const Content = ({ chapterList, currentChapterId }) => {
  // 根据选中的ID找到对应的章节内容
  const currentChapter = chapterList.find(chapter => chapter.id === currentChapterId);

  if (!currentChapter) {
    return <div className="content-container">请选择一个章节查看内容</div>;
  }

  return (
    <div className="content-container">
      <h2>{currentChapter.title}</h2>
      <div className="content-body">{currentChapter.content}</div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  chapterList: state.chapters.chapterList,
  currentChapterId: state.chapters.currentChapterId
});

export default connect(mapStateToProps)(Content);

这样一套下来，点击左侧章节时，Redux会更新全局的选中状态，ChapterList组件会根据这个状态自动给对应项加上高亮样式，同时Content组件也会同步展示对应内容，完美匹配你的需求~

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