React: Component: Content Truncatation

20th August 2020 at 2:19pm
React: Component

对于超出一定行数的内容,很多场景下为了简洁,需要显示 ... (show more) 字样:

现有的方案:

  • react-show-more: 基于 react-truncate。后者基于离屏 canvas 及 measureText 方法来判断内容宽度。缺陷是传入的内容只能是纯文本,不能是 HTML node。所以无法搞样式,只能继承父容器的样式。
  • react-truncate-markup: 支持传入 HTML node,支持内容带样式。为了使内容带样式,它需要让这些内容实际被渲染出来,再用二分法将 JSX 内容减半,判断是否超出容器高度。重复数次后找到合适的内容量。它的实现原理更佳,而且作者写了大量使用样例,库质量看起来也不错。但它的缺点是,传入的只能是 DOM 元素,不能是 ReactNode;没有实现现成的 show more / show less 开关。官网有提供一个用额外代码实现的 示例

实测这两种方式都比较纠结。大部分情况下,我是期望能对一个动态生成的 ReactNode 做截断的(因为大多数情况下内容都是动态的),但是 react-show-more 不能有格式(比如 <p>, <br>),react-truncate-markup 不能传 ReactNode,都比较鸡肋。

TODO: 调研这种 JavaScript 的 方案