关于react.js:如何动态展示文本简介下的展开按钮

42次阅读

共计 760 个字符，预计需要花费 2 分钟才能阅读完成。

Keywords:
富文本的滚动高度获取 scrollHeight 跟 offsetHeight 高度

产品需要
1. 文本简介时前三行展现，前面省略号
2. 超出前三行时，展现‘开展按钮’，否则不展现，开展按钮

剖析
1. 文本简介是个富文本，react 解析富文本，用到的 api 是

 const data=`<p><span>1</span></p>`
 <div dangerouslySetInnerHTML={{__html:    data}}></div>

2. 超出三行展现省略号，则采纳 css 形式即可

    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 这里是超出几行省略 */
    overflow: hidden;

3. 是否展现‘开展按钮’，这个须要依据内容的来动静展现，当简介没超过三行文本的时候，也就是开端没有 ’…’ 的时候就不须要展现‘开展按钮’，如何判断呢？
用到另外两个 dom 相干的 api srollHeight 和 offsetHeight

useEffect(() => {
    let conDOm = conRef.current;
    if (conDOm) {
      const offsetH = conDOm.offsetHeight;
      const srollH = conDOm.scrollHeight;
      console.log(offsetH, 'offsetH');
      console.log(srollH, 'srollH');
      // 会有 2px 的偏差
      if ((srollH - 2) > offsetH) {setisDisplayText(true);
      }
    }
}, [])

进阶
面试的时候会问你，react 这个 api：dangerouslySetInnerHTML 是如何实现的？

正文完