Reactjs 使用React控制元件的高度

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

我想呈现图书列表，由于描述太长，无法显示，我想限制div的高度。单击一次，我想显示完整的描述文本，如果再次单击，将其关闭

像这样：

以下是呈现图书列表的函数：

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

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

renderBooks（）{
返回(
可用图书清单

{this.props.books.map（（book）=>{
返回(


名称：{book.Name}
页面：{book.Pages\u i}
类型：{book.Genre\u s}
价格：{book.Price}
说明：{renderHTML（book.Description）}查看所有


);
})}

);

---

我很感激React风格如何实现这一点？我觉得应该有一些与状态相关的东西，但我想不出如何正确地做到这一点。另外，我不确定如何通过单击事件处理特定书籍的上下文。

我将有两个React组件，

图书列表和
书本

Book
将在其状态上有一个布尔值来指示它是否已展开。它还将有一个
onClick
处理程序，该处理程序通过调用
this.setState（{expanded:！this.state.expanded}）来切换展开的状态。

然后，根据Kenneth的评论，这将取决于book的render函数来查看状态，并为该书未展开的情况应用额外的CSS类。
添加代码以防有人需要相同的解决方案
这就是我的新代码的样子：

呈现书籍列表的组件：

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

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}来自'React'；
从“/description_render”导入BookDescription；
导出默认类RenderBooks扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
可用图书清单

{this.props.books.map（（book）=>{
返回(


名称：{book.Name}
页面：{book.Pages\u i}
类型：{book.Genre\u s}
价格：{book.Price}



);
})}

);
}
}

保存已单击图书描述的状态的新组件

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

}

import React，{Component}来自'React'；
从“react render html”导入renderHTML；
导出默认类BookDescription扩展组件{
建造师（道具）{
超级（道具）；
this.state={istogleon:true}；
//此绑定是使`This`在回调中工作所必需的
this.handleViewClick=this.handleViewClick.bind（this）；
}
handleViewClick（）{
this.setState（prevState=>({
isToggleOn:！prevState.isToggleOn
}));
}
render（）{
返回(
描述：{renderHTML（this.props.Description）}{this.state.isToggleOn？'View All'：'Close'}
)
}
}
实现这一点的反应方式是切换CSS类。例如，您有一个
.closed
类，该类限制了描述的高度，然后添加一个
onClick
处理程序，在单击描述时切换到
。打开
类-类似于在小提琴中实现的方式。请参见：Th谢谢Kenneth，通过您对这个问题的链接和回答，我能够做到：）尽管我必须进行描述并将div作为单个组件单击，因此每个书中的状态都是分开的是的，这正是我所做的：）谢谢您和Kenneth的帮助。