Question

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

书list.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;
}

actions.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时，

活动类才会生效

// EDIT 你必须通过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>
        )
    })

Answer 2

<li key={book.title} 
    className={"list-group-item " + (book.flag ? 'active-class' : 'inactive-class')}
    onClick={() => this.props.selectBook(book)}>
    {book.title}
</li>

在选择一本书时尝试设置'标志'，并相应地有条件地添加样式类（active-class / inactive-class）

Answer 3

在图书清单组件中

function mapStateToProps(state){

  return {
       books:state.books,
       ActiveBook:state.ActiveBook
  };
}



renderList(){

 console.log(this.props.books);
  return this.props.books.map( (book,idx)=>{

        return <li
         onClick={ ()=>this.props.selectBook(book) }
         className= {"list-group-item  " + ( this.props.ActiveBook ? ( this.props.ActiveBook.title===book.title ? "active" : "") : '') }  key={idx}>{book.title}</li>
   } );
}

我已经正确使用了这个。

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

3 个答案: