react实现文字展开和收起功能

最新推荐文章于 2024-08-31 07:50:53 发布

小周sir的码农

最新推荐文章于 2024-08-31 07:50:53 发布

阅读量2.9k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/Govern66/article/details/115386320

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

无论是在PC端页面还是WAP端页面，很常见的页面效果，超长文字，隐藏，然后点击展开和收齐功能。
通过React Hook提供的useState定义好状态，来点击切换展开和收起
id,name,image,info,price从父组件传递的数据
info.substring(0,200)先对文本内容截取
通过对按钮绑定点击事件，去触发useState里面的setReadMore去改变readMore的状态，即可实现这个功能
通过三目运算符 readMore ? info : `${info.substring(0,200)}...如果为真现实全部，否则为截取的字段内容

import React,{useState} from 'react'

const Tour = ({id,name,image,info,price}) => {
    
    const [readMore,setReadMore] = useState(false)

    return (
        <article className="single-tour">
            <img src={image} alt={name}/>
            <footer>
                <div className="tour-info">
                    <h4>{name}</h4>
                    <h4 className="tour-price">￥{price}</h4>
                </div>

                <p> { readMore ? info : `${info.substring(0,200)}...` }

                    <button onClick={() => setReadMore(!readMore)}> { readMore ? '隐藏内容' : '了解更多' }</button>
                </p>
            </footer>
        </article>
    )
}

export default Tour

对应的css样式


.single-tour {
    background: var(--clr-white);
    border-radius: var(--radius);
    margin: 2rem 0;
    box-shadow: var(--light-shadow);
    transition: var(--transition);
  }
  .single-tour:hover {
    box-shadow: var(--dark-shadow);
  }
  .single-tour img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    border-top-right-radius: var(--radius);
    border-top-left-radius: var(--radius);
  }
  .tour-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  .tour-info h4 {
    margin-bottom: 0;
  }
  .single-tour button {
    background: transparent;
    border-color: transparent;
    text-transform: capitalize;
    color: var(--clr-primary-5);
    font-size: 1rem;
    cursor: pointer;
    padding-left: 0.25rem;
  }
  .tour-price {
    color: var(--clr-primary-5);
    background: var(--clr-primary-10);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
  }
  .single-tour footer {
    padding: 1.5rem 2rem;
  }
  .single-tour .delete-btn {
    display: block;
    width: 200px;
    margin: 1rem auto 0 auto;
    color: var(--clr-red-dark);
    letter-spacing: var(--spacing);
    background: transparent;
    border: 1px solid var(--clr-red-dark);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
  }