高度控制阵营

Question

与刚开始的反应，经过多年的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> 
    ); 

我将不胜感激的总体思路如何能在完成阵营的风格？我觉得应该有一些与国家有关的东西，但不能想到如何正确地做到这一点。另外不知道如何通过点击事件处理特定书籍的上下文。

Answer 1

我有两个反应的组分，BookList和Book。

Book会对它的状态布尔值，指出它是否扩大或没有。它也将有一个onClick处理器，其通过调用this.setState({ expanded: !this.state.expanded })

切换展开状态。然后它只是达到预定的渲染功能看状态，并应用额外的CSS类的书不扩大的情况下，根据Kenneth的评论。

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> 
    ) 
} 

}