사용자가 버튼을 클릭 할 때 재사용 가능한 반응 구성 요소가 저장되도록하려면 어떻게해야합니까?

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

트리거되지 않습니다 사용자가 링크를 클릭 할 때 구성 요소를 저장하려면 어떻게합니까? 그것은 반응/redux 응용 프로그램입니다.

Answer 1

"React.Component"에서 확장되는 클래스에서 일을하고있는 이유는 무엇입니까? ReactJS 구성 요소에서는 그런 일을하기위한 것이 아닙니다. 공식 문서 "구성 요소를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 분리하고 각 부분을 격리하여 생각할 수 있습니다."ui와 관련된 기간을 제외하고 구성 요소에는 구성 요소가 없습니다. 어쨌든 자동 저장을 순수 구성 요소로 만들어 모든 구성 요소에서 사용해야합니다. componentWillUnmount()도 onbeforeunload를 트리거하지 않습니다 새 탭 열기

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

:

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 핸들러를 추가하기 만하면됩니다.