Как обновлять скрипты каждый раз, когда монтируется какой-либо компонент?

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" />
        }}
      />
...

Как видите, у меня есть компонент <Menu /> вне Switch. И именно здесь загружаются скрипты 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 может быть загружен только в первый раз, когда был загружен компонент меню.

Похоже, что componentDidMount() в классе Menu не запускается (что, я думаю, будет обновлять jQuery при запуске, когда реагирует роутер make)изменения для перемещения страниц. Это то, что я думаю, проблема, но не уверен.

Как я могу решить эту проблему?

Answer 1

componentDidUpdate пригодится здесь В основном то, что componentDidUpdate делает, принимает два аргумента (prevProps, prevState) и запускается в любое времяреквизит изменен или состояние обновлено.

Так что в качестве простого примера вы можете сделать что-то подобное в своем компоненте

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

}}

Примечание

componentDidUpdate () не будет вызвано, если shouldComponentUpdate () вернет false.