亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

每次安裝任何組件時如何刷新腳本?

每次安裝任何組件時如何刷新腳本?

慕斯709654 2021-11-12 10:55:31
我正在使用一些具有動畫效果的 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,我猜)。這就是我認為的問題,但不確定。我該如何解決這個問題?
查看完整描述

1 回答

?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

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

        }

    });

} }


筆記


componentDidUpdate()如果將不會被調用shouldComponentUpdate()返回false。


查看完整回答
反對 回復 2021-11-12
  • 1 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號