react-text-fun组件重复渲染文本问题求助

测试react-text-fun库时遇到异常：已在public HTML文件中引入blotterjs-fork脚本并完成库安装，但使用LiquidDistortionText组件添加液体扭曲文本效果时，页面会渲染出两个相同的文本元素，寻求解决思路。

提供的代码 #

public HTML代码 #

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://unpkg.com/blotterjs-fork@0.1.0/build/blotter.min.js"></script>
  </body>

组件代码 #

import React from 'react'
import { LiquidDistortionText } from 'react-text-fun'
// styles
import { Header, HeroContainer } from './Home.styles'

export default function Home() {
  return (
    <Header>
      <HeroContainer>
        <LiquidDistortionText
          text="Text"
          speed={0.25}
          rotation={0.2}
          distortX={0}
          distortY={0.2}
          noiseAmplitude={0.1}
          noiseVolatility={1}
        />
      </HeroContainer>
    </Header>
  )
}

解决思路 #

• 检查组件配置参数：查看react-text-fun官方文档，确认LiquidDistortionText是否有用于隐藏原始文本的props（比如hideOriginal），若有则开启该参数，避免原始文本与特效文本同时显示。
• 手动通过CSS隐藏重复元素：给LiquidDistortionText组件添加自定义类名，例如：

  <LiquidDistortionText
    className="liquid-text"
    // 其他props...
  />
  

  然后在样式文件中添加：

  .liquid-text > span:first-child {
    display: none;
  }
  

  定位并隐藏组件内部渲染的原始文本节点。
• 排查版本兼容性问题：尝试升级或降级react-text-fun、blotterjs-fork的版本，部分版本可能存在重复渲染的bug，可查看npm包的issue列表确认是否有同类问题及修复方案。
• 检查组件初始化逻辑：若自行封装过相关逻辑，确认是否重复调用了渲染方法或实例化了多个Blotter对象，导致文本被渲染两次。

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