慕斯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。
添加回答
舉報
0/150
提交
取消