ユーザーがボタンをクリックしたときに再利用可能な反応コンポーネントを保存するにはどうすればよいですか？

Question

私のコンポーネントthis.props.save();componentWillUnmount？しかし、私は別のタブに外部リンクにページを残せば、それは私のコンポーネント

export default class AutoSave extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    this.setIntervalId = null; 
 
    } 
 

 
    componentDidMount() { 
 
    if (!window.onbeforeunload) { 
 
     window.onbeforeunload =() => { 
 
     this.props.save(); 
 
     }; 
 
    } 
 

 
    this.setIntervalId = setInterval(() => this.props.save(), this.props.intervalInMs); 
 
    } 
 

 
    componentWillUnmount() { 
 
    this.props.save(); 
 
    clearInterval(this.setIntervalId); 
 
    } 
 

 
    render() { 
 

 
    return <span className="saving">Last saved at {now()}</span>; 
 
    } 
 
}

私のリンクは、この

<Link href="http://www.google.com" target="_blank"> 
     Google Link 
    </Link> 

のように見えますcomponentWillUnmount

をトリガしません。ユーザーがリンクをクリックしたときにコンポーネントを保存するにはどうすればよいですか？それは反応/還元アプリです。

Answer 1

「React.Component」から継承するクラスで何らかの仕事をしているのはなぜですか？ ReactJSのコンポーネントは、そのような仕事をするためのものではありません。公式のドキュメンテーションから "コンポーネントを使用すると、UIを独立した再利用可能な部分に分割し、各部分について孤立して考えることができます。" UIに関連する部分以外のコンポーネントはありません。とにかく、自動保存を純粋なコンポーネントとして作成し、すべての反応コンポーネントで使用する必要があります。 ：新しいタブを開く

import AutoSave from './AutoSave'; 
export default class ReactComponent extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      // ... other properties 
      "lastSave": new Date() 
     } 
     this.save = this.save.bind(this); 
     this.autoSave = new AutoSave(this.save, 100); 
     this.autoSave.onSave(
      () => { 
       this.setState(
        { 
         "lastSave": new Date() 
        } 
       ); 
      } 
     ) 
    } 

    componentWillUnmount() { 
     this.autoSave.unmount(); 
     this.autoSave = null; 
    } 

    onClick() { 
     this.autoSave.save(); 
    } 

    save() { 
     // some saving job 
    } 

    render() { 
     return ( 
      <div> 
       // ... other components 
       <Link href="http://www.google.com" target="_blank" onClick={this.onClick.bind(this)}> 
        Google Link 
       </Link> 
       <span className="saving">Last saved at {this.state.lastSave}</span> 
      </div> 
     ); 
    } 
} 

Answer 2

componentWillUnmount（）もonbeforeunloadをトリガしません。

export default class AutoSave 
{ 
    constructor(saveFn, intervalInMs) { 
    this.saveFn = saveFn; 
    this.setIntervalId = setInterval(
     () => { 
      this.save(); 
     }, 
     intervalInMs 
    ); 
    } 

    unmount() { 
    this.save(); 
    clearInterval(this.setIntervalId); 
    } 

    save() { 
    this.saveFn(); 
    this.callOnSaveCallback(); 
    } 

    onSave(callback) { 
    this.onSaveCallback = callback; 
    } 

    // private method that calls onSaveCallback 
    callOnSaveCallback() { 
    if(this.onSaveCallback != null) 
     this.onSaveCallback(); 
    } 

} 

そして、私の中でそれを使用するには、このようなコンポーネントが反応します。どちらの場合も、アプリは元のタブで開いているためです。 Reactは、ページを閉じたり、ページからナビゲートする直前にコンポーネントをアンマウントしないので、ページが閉じてもcomponentWillUnmount（）は何もしません。 onbeforeunloadは、同じタブ内のページから離れたときにのみトリガするか、タブ/ウィンドウを閉じます。

ボタンをクリックするたびにthis.props.save（）を確実に呼び出すには、ボタンにonClickハンドラを追加するだけです。

render() { 
    return <span onClick={this.props.save} className="saving">Last saved at {now()}</span>; 
}