React中使用TypeIt实现打字效果时字符串未逐段删除切换问题

在React中使用TypeIt打字动效库时，strings配置数组中设置了3个待展示字符串，预期行为为每段字符串输入完成后自动删除，再输入下一段字符串；实际运行时所有字符串会先全部输入完成才执行删除操作，无法达到预期效果。

• 「单条字符串输入完成即自动删除，再输入下一条」的认知是否符合TypeIt的默认逻辑？
• 是否需要额外实现官方文档提供的onStringTyped这类内部回调函数，才能实现单条输完即删的效果？

<TypeIt
  options={{
    strings: ["string0", "string1", "string2"],
    waitUntilVisible: true,
    loop: true,
    lifeLike: true,
    cursorChar: "_",
    smartBackspace: true,
  }}
></TypeIt>

你的认知符合常规打字动效的交互预期，但这不是TypeIt的默认行为：TypeIt默认开启breakLines: true配置，会将strings数组中的所有字符串按顺序依次换行输入，全部输入完成后才会在循环模式下执行整体删除，因此才会出现你观察到的现象。

不需要手动实现onStringTyped回调编写删除逻辑，只需在配置中新增breakLines: false即可实现打完一条自动删除、再输入下一条的效果。修正后的配置如下：

<TypeIt
  options={{
    strings: ["string0", "string1", "string2"],
    waitUntilVisible: true,
    loop: true,
    lifeLike: true,
    cursorChar: "_",
    smartBackspace: true,
    breakLines: false, // 关闭换行输入，启用单条输完即删逻辑
  }}
></TypeIt>

补充说明：

• 你配置的smartBackspace: true规则仅在breakLines: false时生效，会自动识别相邻字符串的公共前缀，删除时仅移除差异部分，不需要全量删除后再输入下一条，动效更贴近真实打字习惯。
• 如果需要调整单条字符串输入完成后的停留时长，可以通过nextStringDelay配置项修改等待时间，不需要额外编写回调逻辑。

内容的提问来源于stack exchange，提问作者Faheim Arslan