为什么我的反应组件不断重新渲染?
Why does my react component keep re-rendering?
我正在尝试将一个 tockify 日历嵌入到我正在构建的 React 项目中的组件中。我应该注意,我正在使用一个名为 react-script-tag 的库,它允许我在我的组件中使用 <script/>
标签。
不管怎样,压延机正在渲染——但随后继续重新渲染,就好像它卡在某种循环中一样。我觉得我需要实施某种生命周期方法。有什么建议么?代码如下:
import React from 'react'
import Nav from './Nav'
import ScriptTag from 'react-script-tag'
class Events extends React.Component {
render() {
return (
<div>
<Nav/>
<div data-tockify-component="calendar" data-tockify-calendar="hzevents2"></div>
<ScriptTag isHydrating={false} data-cfasync="false" data-tockify-script="embed" src="https://public.tockify.com/browser/embed.js"></ScriptTag>
</div>
)
}
}
export default Events
'react-script-tag' 的文档说
It is recommended that the Script tag is placed in a component that
only renders once in the entire life of your app. Otherwise, a new
tag will be appended each time the component mounts again.
There are plans down the road to prevent this.
您可能希望使用纯组件来防止重新渲染。
编辑:无论我的回答如何,您都应该显示其余代码以便能够检测到问题。
使用 React.PureComponent 而不是 React.Component 因为 React.PureComponent 将在不需要或更新时阻止重新渲染。
我正在尝试将一个 tockify 日历嵌入到我正在构建的 React 项目中的组件中。我应该注意,我正在使用一个名为 react-script-tag 的库,它允许我在我的组件中使用 <script/>
标签。
不管怎样,压延机正在渲染——但随后继续重新渲染,就好像它卡在某种循环中一样。我觉得我需要实施某种生命周期方法。有什么建议么?代码如下:
import React from 'react'
import Nav from './Nav'
import ScriptTag from 'react-script-tag'
class Events extends React.Component {
render() {
return (
<div>
<Nav/>
<div data-tockify-component="calendar" data-tockify-calendar="hzevents2"></div>
<ScriptTag isHydrating={false} data-cfasync="false" data-tockify-script="embed" src="https://public.tockify.com/browser/embed.js"></ScriptTag>
</div>
)
}
}
export default Events
'react-script-tag' 的文档说
It is recommended that the Script tag is placed in a component that only renders once in the entire life of your app. Otherwise, a new
tag will be appended each time the component mounts again. There are plans down the road to prevent this.
您可能希望使用纯组件来防止重新渲染。
编辑:无论我的回答如何,您都应该显示其余代码以便能够检测到问题。
使用 React.PureComponent 而不是 React.Component 因为 React.PureComponent 将在不需要或更新时阻止重新渲染。