每次安装任何组件时如何刷新脚本？

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;

    }

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

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

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

componentDidMount()当反应路由器为移动页面进行更改时，看起来菜单类没有被触发（如果触发，它将刷新 jQuery，我猜）。这就是我认为的问题，但不确定。

我该如何解决这个问题？

Answer 1

componentDidUpdate 在这里会派上用场 基本上， componentDidUpdate 的作用是接受两个参数（prevProps、prevState）并在 prop 更改或状态更新时运行。所以作为一个简单的例子，你可以在你的组件中做这样的事情componentDidUpdate(prevProps, prevState){// Typical usage (don't forget to compare props):&nbsp; if (prevProps.propThatReceiveChanges !== this.props.propThatReceiveChanges){&nbsp; this.loadExternalScripts().then(() => {&nbsp; &nbsp; &nbsp; &nbsp; if (this._isMounted) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({ isDataFetched: true });&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });} }笔记componentDidUpdate（）如果将不会被调用shouldComponentUpdate（）返回false。