我正在构建一个 Nextjs网站并正在使用 react-typist library
我希望我使用打字员库编写的文本在无限循环中运行。这是我的组件目前的样子。
import Typist from 'react-typist'
const Typer = () => {
return (
<Typist
className="flex justify-center mt-10 text-2xl h-10"
cursor={{
show: false
}}
>
<Typist.Delay ms={1000} />
<div>Some text</div>
<Typist.Backspace count={20} delay={200} />
<Typist.Delay ms={1000} />
<div>Some more text</div>
<Typist.Backspace count={13} delay={200} />
<Typist.Delay ms={1000} />
<div>Even More Text</div>
<Typist.Backspace count={18} delay={200} />
<Typist.Delay ms={1000} />
<div>Last bit of text</div>
</Typist>
)
}
export default Typer
这是我导入组件的主要 index.js 文件。
import Head from '../components/head'
import Nav from '../components/nav'
import Typer from '../components/Typer'
import '../styles/main.css'
const Index = () => {
return (
<div>
<Head title="Learn Nextjs" />
<Nav />
<Typer />
</div>
)
}
export default Index
我尝试将它包装在一个 for 循环中，但这似乎不起作用。我应该一遍又一遍地重新安装组件吗？如果是这样，我应该怎么做？如果您需要我提供任何其他信息来帮助解决这个问题，请告诉我。提前致谢。
最佳答案
我查看了他们的文档并找到了这个 onTypingDone
<Typist
className="flex justify-center mt-10 text-2xl h-10"
cursor={{
show: false
}}
onTypingDone={reRenderYourComponent}
>
您可以在其中使用一些回调函数，例如使用 this way 重新渲染组件。
this.forceUpdate();
关于javascript - Reactjs 在循环中重新渲染组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59395553/