react-text-fun 渲染文本两次？

Question

I've been playing around with some libraries and tested out react-text fun.我一直在玩弄一些库并测试了 react-text 的乐趣。 I placed the blotter script in my html file and installed the library.我将吸墨纸脚本放在我的 html 文件中并安装了库。 When I test out an effect, I get two rendered elements on my page.当我测试一个效果时，我在我的页面上得到了两个呈现的元素。 Any ideas on how to fix this?有想法该怎么解决这个吗？

public HTML:公共 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>

component:成分：

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

// components

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>
  )
}

rendered webpage呈现的网页

Answer 1

Everything looks correct.一切看起来都是正确的。 You should look at your Header Component and HeroContainer.你应该看看你的 Header 组件和 HeroContainer。 Maybe you used children twice times.也许你用过 children 两次。

react-text-fun 渲染文本两次？

问题描述

1 个解决方案

解决方案1
0 2023-01-23 19:48:13

react-text-fun 渲染文本两次？

问题描述

1 个解决方案

解决方案1 0 2023-01-23 19:48:13

解决方案1
0 2023-01-23 19:48:13