ReactJS中如何为li元素添加active类/选中状态？

别灰心呀！这个列表项选中高亮的需求其实有两种很实用的实现方案，完全可以根据你是否需要全局共享选中状态来选择：

方案一：组件内部维护选中状态（适合仅当前组件需要这个状态） #

如果只是BookList组件本身需要知道哪本书被选中，不需要其他组件同步这个状态，那直接在组件内部用state管理就好，完全不用动Redux，简单又高效。

修改你的BookList组件：

class BookList extends Component {
  // 初始化状态，存储选中书籍的id
  state = {
    selectedBookId: null
  };

  // 处理书籍点击的方法
  handleBookClick = (bookId) => {
    this.setState({ selectedBookId: bookId });
  };

  renderList(){
    return this.props.books.map((book) => {
      // 判断当前书籍是否被选中
      const isSelected = this.state.selectedBookId === book.id;
      return (
        <li
          key={book.id}
          // 动态添加选中类
          className={isSelected ? 'active-book' : ''}
          onClick={() => this.handleBookClick(book.id)}
        >
          {book.title}
          {/* 这里放你的书籍其他内容 */}
        </li>
      );
    });
  }

  render() {
    return <ul>{this.renderList()}</ul>;
  }
}

然后在CSS里添加选中样式：

.active-book {
  background-color: #f0f0f0; /* 换成你想要的背景色 */
}

方案二：用Redux管理选中状态（适合全局共享状态） #

如果你的书籍详情组件需要从Redux获取选中的书籍信息，或者其他组件也需要知道当前选中的是哪本书，那就用Redux来管理这个选中状态。

1. 定义Action和Action Creator #

// 比如在 actions/bookActions.js 里
export const selectBook = (book) => {
  return {
    type: 'SELECT_BOOK',
    payload: book
  };
};

2. 编写Reducer处理这个Action #

// 比如在 reducers/bookReducer.js 里
const initialState = {
  books: [], // 你的书籍列表数据
  selectedBook: null // 存储选中的书籍
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SELECT_BOOK':
      return {
        ...state,
        selectedBook: action.payload
      };
    default:
      return state;
  }
};

记得把这个reducer合并到你的root reducer中（如果还没做的话）。

3. 修改BookList组件连接Redux #

import { connect } from 'react-redux';
import { selectBook } from '../actions/bookActions'; // 引入刚才的action creator

class BookList extends Component {
  renderList(){
    return this.props.books.map((book) => {
      // 判断当前书籍是否是选中项
      const isSelected = this.props.selectedBook?.id === book.id;
      return (
        <li
          key={book.id}
          className={isSelected ? 'active-book' : ''}
          onClick={() => this.props.selectBook(book)}
        >
          {book.title}
          {/* 书籍其他内容 */}
        </li>
      );
    });
  }

  render() {
    return <ul>{this.renderList()}</ul>;
  }
}

// 从Redux Store中映射需要的状态到组件props
const mapStateToProps = (state) => {
  return {
    books: state.books.books, // 根据你的store结构调整路径
    selectedBook: state.books.selectedBook
  };
};

// 把action creator映射到组件props
export default connect(mapStateToProps, { selectBook })(BookList);

同样需要添加那个active-book的CSS样式。

其实这两种方案都很清晰，选哪种完全看你的状态共享需求～不用因为这个小问题灰心，React+Redux的状态管理理清逻辑后就会越来越顺手的！

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