如何在ReactJS中为li元素添加活动类/状态？

Question

我一整天都在为一个问题苦苦挣扎......我有书籍列表，点击后用户可以看到每本书的详细信息。我想在单击background-color元素时添加li（类似于类active）。我使用 Redux 和 React，但不知道创建此功能的最佳方法是什么。请给我一些提示，因为我对 React 环境感到灰心......

图书列表.js

class BookList extends Component {
    renderList(){
        return this.props.books.map((book) => {
            return (
                <li key={book.title} 
                    className="list-group-item" 
                    onClick={() => this.props.selectBook(book)}>
                    {book.title}
                </li>
            )
        })
    }

render () {
    return (
        <div>
            <h3 className="m-t-2 m-b-1">Books to read:</h3>
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        </div>
    );
 } 
}

function mapStateToProps (state) {
    return {
        books: state.books
    };
 }

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ selectBook: selectBook }, dispatch)
}

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

reducer_active_book.js

export default function(state = null, action) {
    switch(action.type) {
    case 'BOOK_SELECTED':
        return action.payload;
    }
        return state;
}

动作.js

export function selectBook (book) {
    return {
        type: 'BOOK_SELECTED',
        payload: book
    }
}

Answer 1

您可以使用classnames包https://github.com/JedWatson/classnames

import classNames from 'classnames';

return this.props.books.map((book) => {
        return (
            <li key={book.title} 
                className={classnames({'list-group-item':true, 'active': book.active})} 
                onClick={() => this.props.selectBook(book)}>
                {book.title}
            </li>
        )
    })

仅当 book.active 为 true 时，active 类才会产生影响

//编辑你必须通过mapStateToProps从你的状态传递reducer_active_book属性

function mapStateToProps (state) {
return {
    books: state.books,
    reducer_active_book: state.reducer_active_book,
};

}

现在在渲染中你可以使用它。

return this.props.books.map((book) => {
        return (
            <li key={book.title} 
                className={classnames({'list-group-item':true, 'active': this.props.reducer_active_book.id === book.id})} 
                onClick={() => this.props.selectBook(book)}>
                {book.title}
            </li>
        )
    })