【飞机＠duoteJG】多特工作室杰哥版权所有，禁止转载
昨天我们讲了：由于 React 微信飞鸟组件是描述GT江湖 UI 特定部分的运营源码 JavaScript 代码片段，今天我们来讲下半部分的如何在可重用组件中调整单行文本单行文本由标题、标题和标签表示。它通常包含在<h1>、<h2>、<h3>或更一般<p>的<span>HTML 元素中。在处理单行文本时，拟合问题几乎是不可避免的。这是因为它的字体大小往往比段落中使用的字体大得多。当single模式被上述modeprop in激活时Textfit，将应用以下涉及强制和可选步骤的算法：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-text">1. binary search to fit the element's width
2. if forceSingleModeWidth=false and text overflows height
2a. binary search to also fit the element's height
</code></span></span>
正如这里所解释的，二分搜索算法用于检索正确的字体大小，以使Textfit组件中包含的文本适合其宽度。然后，如果forceSingleModeWidth设置为false，则使用相同的方法——但还要考虑元素的高度。
使 React 组件可重用：单行演示
single现在，让我们通过现场演示来看看 Textfit模式的实际效果：
正如您所看到的，通过使您的文本更长，其字体大小将相应地更新Textfit以使其匹配其大小。在保持文本不变的情况下调整文本框大小时应用完全相同的逻辑。这就是小屏幕会发生的事情。因此，Textfit它代表了在任何 React 组件或 HTML 元素中使标题和标题响应的完美解决方案。
如何在响应式 React 组件中适配多行文本
多行文本由段落、字幕和描述表示。它通常包含在<p>、<em>或<div>HTML 元素中。多行文本的拟合问题在高度方面很常见。事实上，在处理较小的屏幕时，由于可用宽度减小，您的文本会变得更高。因此，这可能会使您的文本超出固定高度的卡片或部分。
当multi模式在 中激活时Textfit，将应用以下涉及两个强制性步骤的算法：
<span style="background-color:#292d3e"><span style="color:#bfc7d5"><code class="language-text">1. binary search to fit the element's height
2. if text overflows width
2a. binary search to also fit the element's width
</code></span></span>
二进制搜索算法用于检索正确的字体大小，以使Textfit组件中包含的文本适合其高度。然后，使用相同的方法，但也考虑到元素的宽度。如您所见，与single模式中发生的情况相反，高度优先于宽度。这是由上述原因解释的。
使 React 组件可重用：多行演示
multi现在，让我们通过现场演示来看看 Textfit模式的实际效果：
通过与现场演示交互并使多行文本更长，其字体大小将更新以使文本适合 HTML 元素尺寸。Textfit在保持文本不变的情况下调整组件大小时也会发生同样的事情。这就是小屏幕会发生的事情。因此，Textfit在任何 HTML 元素或 React 组件中使段落和长描述响应是一个很好的解决方案。
结论
由于智能手机和平板电脑已成为最广泛使用的访问网络的设备，因此响应能力已成为一个不容忽视的问题。在本文中，我们研究了该领域中的一个特定问题。特别是，我们探索了一个特定的文本拟合问题，为什么解决它如此重要，以及如何在 React 中完成它。
该react-textfit库是一个有用的、开源的、有效的 React 库，它允许您轻松地使您的文本（单行和多行）轻松适应任何 React 组件。
