每次挂载任何组件时如何刷新脚本?

Question

我正在使用一些具有动画效果的jQuery脚本。

因此，它具有动画效果，每当页面上呈现某些内容时，都必须一次又一次地工作，jQuery脚本也应该刷新。但问题是jQuery脚本没有刷新。

这是我的路由器：

export default () => (
<div>
<Menu />
<Switch>
<Route
exact path="/"
render={({ staticContext, match }) => {
const site = staticContext
? staticContext.site
: location.hostname.split(".")[0]
return <UniversalComponent site={site} match={match} page="core/Home" />
}}
/>
...

如您所见，我在 Switch 之外有一个<Menu />组件。这就是加载jQuery脚本的地方。

class Menu extends Component {
_isMounted = false;
constructor(props) {
super(props);
this.state = {
isDataFetched: false
};
this.loadExternalScripts = this.loadExternalScripts.bind(this);
}
componentDidMount() {
this._isMounted = true;
this.loadExternalScripts().then(() => {
if (this._isMounted) {
this.setState({ isDataFetched: true });
}
});
}
componentWillUnmount() {
this._isMounted = false;
}
async loadExternalScripts() {
const postscribe = require('postscribe');
await postscribe('#react-root', '<script src="/vendor/js/jquery-3.3.1.min.js"></script>');
await postscribe('#react-root', '<script src="/vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>');
await postscribe('#react-root', '<script src="https://use.fontawesome.com/releases/v5.9.0/js/all.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/jquery.waypoints.min.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/waypoints.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/lightbox.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/owl.carousel.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/jquery.counterup.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/validator.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/contact.js"></script>');
await postscribe('#react-root', '<script src="/vendor/js/custom.js"></script>');
}
...

使用">postscribe"库，我加载了所有必需的jQuery脚本。

其中，脚本相关的导航切换按钮，效果很好，因为导航切换的东西与是否刷新无关。

但是，与动画相关的脚本，应在加载任何页面时刷新，它们只能工作第一次，然后不再工作。因为 jQuery 只能在第一次加载菜单组件时加载。

看起来当反应路由器更改移动页面时，Menu 类中的componentDidMount()没有被触发(如果触发，我会刷新 jQuery(。这就是我认为的问题，但不确定。

如何解决此问题？

Answer 1

componentDidUpdate 将在这里派上用场 基本上，componentDidUpdate所做的是接受两个参数(prevProps、prevState(，并在 prop 更改或状态更新时运行。

因此，作为一个简单的示例，您可以在组件中执行类似操作

componentDidUpdate(prevProps, prevState){
// Typical usage (don't forget to compare props):
if (prevProps.propThatReceiveChanges !== this.props.propThatReceiveChanges){
this.loadExternalScripts().then(() => {
if (this._isMounted) {
this.setState({ isDataFetched: true });
}
});

} }

注意

如果shouldComponentUpdate((返回 false，则不会调用componentDidUpdate((。