高度控制陣營

與剛開始的反應，經過多年的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> 
    );

我將不勝感激的總體思路如何能在完成陣營的風格？我覺得應該有一些與國家有關的東西，但不能想到如何正確地做到這一點。另外不知道如何通過點擊事件處理特定書籍的上下文。

來源

2017-07-18 metamorph_online

React的方式去做這件事將是切換CSS類。比方說，你有一個'.closed'類，它限制了描述的高度，然後當你點擊描述時添加一個'onClick'處理器切換到'.open'類 - 類似於它的實現方式在你的小提琴中。看到這個：https：//facebook.github.io/react/docs/handling-events.html –

謝謝Kenneth，你的鏈接和https://stackoverflow.com/questions/42630473/react-toggle-class-onclick回答這個問題，我能做到這一點:)雖然我不得不作出描述，並單擊div作爲一個單一的組成部分，所以這種狀態在每本書中分開 –

我有兩個反應的組分，BookList和Book。

Book會對它的狀態布爾值，指出它是否擴大或沒有。它也將有一個onClick處理器，其通過調用this.setState({ expanded: !this.state.expanded })

切換展開狀態。然後它只是達到預定的渲染功能看狀態，並應用額外的CSS類的書不擴大的情況下，根據Kenneth的評論。

來源

2017-07-18 22:15:05

是的，這正是我所做的:)謝謝你和Kenneth你的幫助。 –

增加的情況下，有人代碼需要同樣的解決方案這是我新的代碼看起來像：

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

}

來源

2017-07-18 22:21:19

高度控制陣營

回答

相關問題