Funktion von einer anderen Komponente aufrufen

Question

Ich verwende React v0.14.8. Ich habe versucht, die fetchData Funktion von einer anderen Komponente aufzurufen. Hier ist mein Code:

export default class TagUtils extends React.Component { 
    deleteTag =() => { 
     Tags.deleteTag(this.props.tag).then(function(response){ 
      if(response.message === 'tag successfully deleted') 
       Sidebar.fetchData(); 
     }); 
    } 
// other codes 

Und:

export default class Sidebar extends React.Component { 
fetchData() { 
     Tags.getTags().done((response) => { 
      this.setState({tags: response.tags || [], loaded: true}); 
     }); 
    } 
//other codes 

Als ich deleteTag genannt, bekam ich diesen Fehler in meiner Konsole:

TypeError: _SidebarJsx2.default.fetchData is not a function 

Answer 1

Sie können nicht Sidebar.fetchData nennen, weil fetchData ist kein statischer Mitglied von Sidebar ist es eine Instanz Mitglied. Dies bedeutet, dass Sie eine Instanz von Sidebar benötigen, um fetchData anzurufen, zum Beispiel new Sidebar().fetchData(). Natürlich ist dies nicht, wie eine React-Komponente verwendet werden soll, und es würde nicht setzen Zustand auf allen anderen Sidebar Instanzen, so wäre es nicht sinnvoll.

Was Sie tun möchten, ist es, einen Rückruf an Ihre TagUtils Komponente zu übergeben:

export default class TagUtils extends React.Component { 
    deleteTag =() => { 
     Tags.deleteTag(this.props.tag).then((response) => { 
      if(response.message === 'tag successfully deleted') 
       this.props.onDeleteTag(); 
     }); 
    } 
} 

export default class Sidebar extends React.Component { 
    fetchData() { 
     Tags.getTags().done((response) => { 
      this.setState({tags: response.tags || [], loaded: true}); 
     }); 
    } 
    render() { 
     return (
      { this.state.tags.map((tag) => 
        <TagUtils tag={tag} onDeleteTag={this.fetchData} />) } 
     ); 
    } 
} 

Wenn Sie diesen Rückruf durch mehrere Schichten von Komponenten fädeln, die in Ordnung ist, das ist typisch in React. Wenn Sie jedoch feststellen, dass Sie viele Requisiten durch viele Komponentenschichten passieren, die scheinbar fehl am Platz sind, oder versuchen, Änderungen in großen horizontalen Bereichen in Ihrer App auszugleichen, ist dies ein primärer Anwendungsfall für Dinge wie Flux und Redux.