Question

刚开始做出反应，经过多年的jQuery后，一些简单的事情就会变得艰难。

我想渲染书籍列表，因为描述太长而无法显示我想限制div的高度。 onClick我想显示完整的描述文本，如果再次点击则关闭它。

这是我呈现图书清单的功能：

renderBooks(){
    return(

    <div>
        <h3>List of available books</h3>

        <ul className="list-group">
            {this.props.books.map((book)=>{

                return (
                    <li key={book.id} className="list-group-item">

                            <div className="cover-img"><img src={book.cover_img} alt="" className="img-responsive" /></div>

                            <div className="book-info">
                                <ul className="list-group">
                                    <li className="list-group-item active"><h4>Name: {book.name} </h4></li>
                                    <li className="list-group-item">Pages: {book.pages_i}</li>
                                    <li className="list-group-item">Genre: {book.genre_s}</li>
                                    <li className="list-group-item">Price: {book.price}</li>
                                    <li className="list-group-item">Description: <div className="description-frame">{renderHTML(book.description)}</div><div className="view-all" onClick={}>View All</div></li>
                                </ul>
                            </div>
                    </li>
                );
            })}
        </ul>
    </div>
    );

我很欣赏如何以React风格实现这一目标？我觉得应该有一些与国家有关但却无法想到如何正确地做到这一点。另外还不确定如何通过点击事件处理特定书籍的上下文。

Answer 1

我会有两个反应组件，BookList和Book。

Book将在其状态上具有布尔值，以指示它是否已展开。它还有一个onClick处理程序，通过调用this.setState({ expanded: !this.state.expanded })

来切换展开状态

然后，根据Kenneth的评论，只需要预订渲染功能来查看状态，并根据Kenneth的评论为该书未扩展的情况应用额外的CSS类。

Answer 2

添加代码以防有人需要相同的解决方案这就是我的新代码的样子：

呈现图书清单的组件：

import React, {Component} from 'react';
import BookDescription from './description_render';


export default class RenderBooks extends Component{

constructor(props){
    super(props);
}

render(){

    return(

    <div>
        <h3>List of available books</h3>

        <ul className="list-group">
            {this.props.books.map((book)=>{

                return (
                    <li key={book.id} className="list-group-item">

                            <div className="cover-img"><img src={book.cover_img} alt="" className="img-responsive" /></div>

                            <div className="book-info">
                                <ul className="list-group">
                                    <li className="list-group-item active"><h4>Name: {book.name} </h4></li>
                                    <li className="list-group-item">Pages: {book.pages_i}</li>
                                    <li className="list-group-item">Genre: {book.genre_s}</li>
                                    <li className="list-group-item">Price: {book.price}</li>
                                    <li className="list-group-item"><BookDescription description={book.description}></BookDescription></li>
                                </ul>
                            </div>
                    </li>
                );
            })}
        </ul>
    </div>
    );
}
}

保存所点击的图书说明的状态的新组件

import React, {Component} from 'react';

import renderHTML from 'react-render-html';

export default class BookDescription extends Component{

    constructor(props){
    super(props);
    this.state = {isToggleOn: true};
    // This binding is necessary to make `this` work in the callback
    this.handleViewClick = this.handleViewClick.bind(this);
}

handleViewClick(){

    this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn
    }));
}


render(){

    return(
    <div>
        Description: <div className={this.state.isToggleOn ? 'description-frame closed' : 'description-frame'}>{renderHTML(this.props.description)}</div><div className="view-all" onClick={this.handleViewClick}>{this.state.isToggleOn ? 'View All' : 'Close'}</div>
    </div>
    )
}

}

使用React

2 个答案: