1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

教你实现React文字展开收起组件

小编小本本 • • VPS运维

介绍

大家好，我是本际云服务器推荐网的小编小本本。今天我们来讲讲文字展开收起组件的实现过程，这个组件可以帮助我们省略一部分文字，通过点击展开收起按钮来查看全部内容。

教你实现React文字展开收起组件

功能需求

文字展开收起组件的需求就是为了在显示一定长度的文字后，自动截取省略号，同时提供一个查看全部按钮，点击后可以展示全部文字，并给予一个收起按钮。

教你实现React文字展开收起组件

展开后效果

教你实现React文字展开收起组件

开发

文字展开收起组件使用React+typescript的技术栈进行开发，如果不使用该技术栈的同学可以参考实现思路。

定义组件所需字段

在开发过程中，我们需要定义以下几个组件字段：

  • content：文本内容
  • maxLen：文字最大显示长度
  • expandText：展开按钮文字
  • collapseText：收起按钮文字
  • contentRender：自定义内容
  • onExpand：展开、收起后触发

获取截断后的文字

获取截断后的文字就是根据maxLen来自动获取，maxLen设置的默认值为300，即超过300个文字之后就会被截断，代码如下：

/**
 * 获取截断后的文字
 * @param text
 */
const getText = (text: string): string => {
  return (text || '').slice(0, maxLen) + '...'
}

获取展开收起按钮

展开收起按钮可以根据contentRender字段里的文本内容来对按钮进行自定义，也可以根据需求进行样式自定义。

/**
 * 获取展开收起按钮
 * @param status
 */
const getExpandBtn = (): React.ReactNode => (
  showBtn ? (
    <span
      className="custom-text-expanded-handler"
      onClick={() => expandToggle(!expanded)}
    >{expanded ? collapseText : expandText}</span>
  ) : null
)

展开收起逻辑

展开收起逻辑就是用来判断是否需要截取文字以及展开所有文字，同时可以使用暴露出去的onExpand方法做其他逻辑操作。

/**

                                                        
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7393.html
赞 (0)
小编小本本小编小本本
« 上一篇 2023年4月18日 am8:00
下一篇 » 2023年4月18日 am8:00

相关推荐