使用 React 控制元素的高度

Question

刚开始使用 react，经过多年的 jQuery，一些简单的事情可能会变得困难

我想呈现书籍列表，由于描述太长而无法显示，我想限制 div 的高度。 onClick 我想显示完整的描述文本，如果再次点击就关闭它。

像这样：https://jsfiddle.net/nb1u1f9t/

这是我呈现书籍列表的函数：

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 的评论，由书的渲染函数来查看状态，并为书未展开的情况应用一个额外的 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>
    )
}

}